Изменить способ анимации надписи в этом слайд-шоу с изображениями jQuery - PullRequest
0 голосов
/ 02 ноября 2011

Я нашел это замечательное слайдшоу jQuery: http://slidesjs.com/examples/images-with-captions/

Однако мне бы хотелось, чтобы область «подписи» не исчезала и не отображалась для каждого изображения. Я бы предпочел, чтобы он просто изменял текст в зависимости от нового изображения.

Возможно ли это, и если да, то как мне этого добиться?

Для справки вот файл: slides.min.jquery.js (http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js)

А вот фрагмент используемого кода JavaScript:

animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

Большое спасибо за любые указатели.

Ответы [ 2 ]

2 голосов
/ 02 ноября 2011
animationStart: function(current){
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

Работал на странице примера.

| EDIT |100% рабочий пример здесь: http://jsfiddle.net/byvd9/1/

1 голос
/ 10 августа 2012

Я сделал корректировку, чтобы эффект субтитров постепенно исчезал, используя непрозрачность, которая начинается с 0 после того, как изображение переходит в карреганду - помня, что если вы выберете эффект перехода фейдера, он создаст титр в фейдере непрозрачности, но только гарантирует, что эффект воспринимается или если вы хотите, чтобы он был более атразадо, чтобы открыть изображение.

<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                //preloadImage: 'img/banner/carregando.gif',
                play: 5000,
                pause: 2500,
                effect: 'fade',
                fadeEasing: "easeOutQuad",
                fadeSpeed: 850,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:0
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                }
            });
        });
    </script>
...