Эффект перехода фона jQuery Colorbox?

Я нахожу фоновый переход jQuery Colorbox очень «сложным». Я не смог найти параметр, в котором можно указать собственный переход. Можно ли создать эффект затухания для фона, как у Nyro Modal?< /сильный>


person Ropstah    schedule 03.05.2010    source источник


Ответы (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
comment
Ваш пример выглядит нормально, однако отображение поля не «ждет» завершения отображения фона... Я не думаю, что для этого есть правильное решение..? - person Ropstah; 04.05.2010
comment
добро пожаловать братан! ;-) не забывайте, что вы, конечно, можете использовать анимацию вместо fadeIn и наоборот! также используйте плагин easing that rook! - person Luca Filosofi; 04.05.2010
comment
Упс, во время тестирования в моем приложении я заметил, что оверлей показывается/скрывается за долю секунды... Это вызывает очень раздражающее мерцание экрана... Есть ли обходной путь для этого...? - person Ropstah; 04.05.2010
comment
установите 1000 на 2000 или больше! - person Luca Filosofi; 04.05.2010
comment
no не помогает... до выполнения этой строки | $('#cboxOverlay,#colorbox').css('видимость', 'скрытый'); | div #cboxOverlay виден уже ~0,01 секунды... - person Ropstah; 04.05.2010
comment
Я сам нашел решение последней проблемы, возможно, вы захотите обновить свой ответ. Он включает передачу {opacity:0} в качестве параметра. Тогда функция наложения show() по умолчанию на самом деле не отображается, потому что ее непрозрачность равна 0. Спасибо за ваши старания! - person Ropstah; 04.05.2010
comment
@Barlas: пожалуйста, рассмотрите возможность повторного голосования, вы не можете проголосовать против только потому, что демо больше не работает, демо было отправлено некоторое время назад, вам всегда нужно ссылаться на источник выше, а не только на демо. Во всяком случае, я обновил демо. теперь работает правильно. спасибо за время. - person Luca Filosofi; 13.05.2013
comment
@Barlas: обратите внимание, что ссылка изменена, или попробуйте очистить кеш. - person Luca Filosofi; 13.05.2013