Я нахожу фоновый переход jQuery Colorbox очень «сложным». Я не смог найти параметр, в котором можно указать собственный переход. Можно ли создать эффект затухания для фона, как у Nyro Modal?< /сильный>
Эффект перехода фона jQuery Colorbox?
Ответы (1)
ОБНОВЛЕНО 2 с эффектами смягчения
ДЕМО: http://so.lucafilosofi.com/jquery-colorbox-background-transition-effect/
$('.example').colorbox({
//added to remove initial flickering
opacity : 0,
//use the onOpen event...
onOpen: function() {
// prevent Overlay from being displayed...
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
// make the overlay visible and
// re-add all it's original properties!
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
// execute our original animation on the overlay!
// animate it you can use here all the
// possible animate combination or plugin...
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 1000 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(1000);
});
}
});
person
Luca Filosofi
schedule
03.05.2010
Ваш пример выглядит нормально, однако отображение поля не «ждет» завершения отображения фона... Я не думаю, что для этого есть правильное решение..?
- person Ropstah; 04.05.2010
добро пожаловать братан! ;-) не забывайте, что вы, конечно, можете использовать анимацию вместо fadeIn и наоборот! также используйте плагин easing that rook!
- person Luca Filosofi; 04.05.2010
Упс, во время тестирования в моем приложении я заметил, что оверлей показывается/скрывается за долю секунды... Это вызывает очень раздражающее мерцание экрана... Есть ли обходной путь для этого...?
- person Ropstah; 04.05.2010
установите
1000
на 2000 или больше!
- person Luca Filosofi; 04.05.2010
no не помогает... до выполнения этой строки | $('#cboxOverlay,#colorbox').css('видимость', 'скрытый'); | div #cboxOverlay виден уже ~0,01 секунды...
- person Ropstah; 04.05.2010
Я сам нашел решение последней проблемы, возможно, вы захотите обновить свой ответ. Он включает передачу {opacity:0} в качестве параметра. Тогда функция наложения show() по умолчанию на самом деле не отображается, потому что ее непрозрачность равна 0. Спасибо за ваши старания!
- person Ropstah; 04.05.2010
@Barlas: пожалуйста, рассмотрите возможность повторного голосования, вы не можете проголосовать против только потому, что демо больше не работает, демо было отправлено некоторое время назад, вам всегда нужно ссылаться на источник выше, а не только на демо. Во всяком случае, я обновил демо. теперь работает правильно. спасибо за время.
- person Luca Filosofi; 13.05.2013
@Barlas: обратите внимание, что ссылка изменена, или попробуйте очистить кеш.
- person Luca Filosofi; 13.05.2013