jQuery 和 CSS 动画问题（图像手风琴）

Question

我试图在这里稍微修改一下这个脚本：http://www.egrappler.com/jquery-responsive-horizontal-accordion-image-slider-raccordion/

您可以在演示中看到，在初始化时，它平移到幻灯片“0”，但不包括标题和标题。让脚本显示标题和标题的唯一方法是平移到另一张幻灯片并返回到幻灯片“0”。我想让标题出现在页面加载时，但我对 Javascript 很糟糕，无法弄清楚。

(function ($) {
    $.fn.raccordion = function (options) {
        var settings = $.extend({
            speed: 700,
            sliderWidth: 960,
            sliderHeight: 300,
            autoCollapse: true,
            activeSlide: 0
        }, options);

        return this.each(function () {
            var accordionWrapper = $(this);
            var width = accordionWrapper.find('.slide img:eq(0)').width();
            accordionWrapper.addClass('accordion-wrapper');
            var totalSlides = accordionWrapper.find('.slide').size();
            var w = width;
            initiliaze();
            if (settings.activeSlide < totalSlides - 1) {
                setTimeout(function () {
                    accordionWrapper.find('.slide:eq(' + settings.activeSlide + ')').click()
                }, settings.speed);
            }

            function initiliaze() {
                if (settings.sliderWidth > $(window).width()) {
                    width = w * (($(window).width() / settings.sliderWidth));
                    accordionWrapper.css("width", settings.sliderWidth * ($(window).width() / settings.sliderWidth));
                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                } else {
                    width = w;
                    accordionWrapper.css("width", settings.sliderWidth);

                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                }
                if (settings.sliderHeight > $(window).height()) {

                    accordionWrapper.animate({ height: settings.sliderHeight * ($(window).height() / settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });

                    accordionWrapper.find('.slide').animate({ height: settings.sliderHeight * ($(window).height() / settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                }
                else {
                    accordionWrapper.animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    accordionWrapper.find('.slide').animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                }
                accordionWrapper.find('.caption').css({ opacity: 0 });
            }

            $(window).resize(function () {
                accordionWrapper.find('.slide').each(function (index) {
                    $(this).stop().animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                });
                animateCaption();
                initiliaze();
            });


            function animateCaption() {
                accordionWrapper.find('.caption').stop().animate({ opacity: 0, bottom: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                accordionWrapper.find('.active').find('.caption').stop().animate({ opacity: 1 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
            }


            accordionWrapper.find('.slide').click(function () {
                var ratio = (((accordionWrapper.width()) - width)) / (totalSlides - 1);
                if (($(this).width() == $('.slide').width()) || ($(this).width() == ratio)) {
                    accordionWrapper.find('.slide').removeClass('active');
                    $(this).addClass('active');
                    var currentIndex = accordionWrapper.find('.slide').index(this);
                    accordionWrapper.find('.slide').each(function (index) {
                        if (index == 0) {
                            $(this).animate({ left: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index == currentIndex) {
                            $(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index < currentIndex) {
                            $(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }
                        else if (index > currentIndex) {
                            $(this).animate({ left: width + (index - 1) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                        }

                    });
                    animateCaption();
                }
            });


            if (settings.autoCollapse) {
                accordionWrapper.mouseleave(function () {
                    accordionWrapper.find('.slide').each(function (index) {
                        $(this).stop().animate({ left: (index * (accordionWrapper.width()) / totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
                    });
                    accordionWrapper.find('.caption').css({ opacity: 0, bottom: 0 });
                });
            }

        });
    }
})(jQuery);

这里有一些可能更相关的代码：

jQuery.extend({

easing: 
{

    // ******* back
    backEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        return c*(p/=1)*p*((s+1)*p - s) + firstNum;
    },

    backEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        return c*((p=p/1-1)*p*((s+1)*p + s) + 1) + firstNum;
    },

    backEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        var s = 1.70158; // default overshoot value, can be adjusted to suit
        if ((p/=0.5) < 1) 
            return c/2*(p*p*(((s*=(1.525))+1)*p - s)) + firstNum;
        else
            return c/2*((p-=2)*p*(((s*=(1.525))+1)*p + s) + 2) + firstNum;
    },

    // ******* bounce
    bounceEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        var inv = this.bounceEaseOut (1-p, 1, 0, diff);
        return c - inv + firstNum;
    },

    bounceEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p < (1/2.75))
        {
            return c*(7.5625*p*p) + firstNum;
        }
        else if (p < (2/2.75))
        {
            return c*(7.5625*(p-=(1.5/2.75))*p + .75) + firstNum;
        }
        else if (p < (2.5/2.75))
        {
            return c*(7.5625*(p-=(2.25/2.75))*p + .9375) + firstNum;
        }
        else
        {
            return c*(7.5625*(p-=(2.625/2.75))*p + .984375) + firstNum;
        }
    },


    // ******* circ
    circEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c * (Math.sqrt(1 - (p/=1)*p) - 1) + firstNum;
    },

    circEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c * Math.sqrt(1 - (p=p/1-1)*p) + firstNum;
    },

    circEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1) 
            return -c/2 * (Math.sqrt(1 - p*p) - 1) + firstNum;
        else
            return c/2 * (Math.sqrt(1 - (p-=2)*p) + 1) + firstNum;
    },

    // ******* cubic
    cubicEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p + firstNum;
    },

    cubicEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*((p=p/1-1)*p*p + 1) + firstNum;
    },

    cubicEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p*p + firstNum;
        else
            return c/2*((p-=2)*p*p + 2) + firstNum;
    },

    // ******* elastic
    elasticEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;


        var peroid = 0.25;
        var s;
        var amplitude = c;

        if (amplitude < Math.abs(c)) 
        {
            amplitude = c;
            s = peroid/4;
        } 
        else 
        {
            s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
        }

        return -(amplitude*Math.pow(2,10*(p-=1)) * Math.sin( (p*1-s)*(2*Math.PI)/peroid )) + firstNum;
    },

    elasticEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;

        var peroid = 0.25;
        var s;
        var amplitude = c;

        if (amplitude < Math.abs(c)) 
        {
            amplitude = c;
            s = peroid/4;
        } 
        else 
        {
            s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
        }

        return -(amplitude*Math.pow(2,-10*p) * Math.sin( (p*1-s)*(2*Math.PI)/peroid )) + c;
    },

    // ******* expo
    expoEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return (p==0) ? firstNum : c * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.001;
    },

    expoEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return (p==1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) + 1) + firstNum;
    },

    expoEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if (p==0) return firstNum;
        if (p==1) return c;

        if ((p/=0.5) < 1) 
            return c/2 * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.0005;
        else
            return c/2 * 1.0005 * (-Math.pow(2, -10 * --p) + 2) + firstNum;
    },

    // ******* quad
    quadEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p + firstNum;
    },

    quadEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c *(p/=1)*(p-2) + firstNum;
    },

    quadEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p + firstNum;
        else
            return -c/2 * ((--p)*(p-2) - 1) + firstNum;
    },

    // ******* quart
    quartEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p*p + firstNum;
    },

    quartEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return -c * ((p=p/1-1)*p*p*p - 1) + firstNum;
    },

    quartEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1) 
            return c/2*p*p*p*p + firstNum;
        else
            return -c/2 * ((p-=2)*p*p*p - 2) + firstNum;
    },

    // ******* quint
    quintEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*(p/=1)*p*p*p*p + firstNum;
    },

    quintEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        return c*((p=p/1-1)*p*p*p*p + 1) + firstNum;
    },

    quintEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;

        if ((p/=0.5) < 1)
            return c/2*p*p*p*p*p + firstNum;
        else
            return c/2*((p-=2)*p*p*p*p + 2) + firstNum;
    },

    // *******  sine
    sineEaseIn:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return -c * Math.cos(p * (Math.PI/2)) +c + firstNum; 
    },

    sineEaseOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return c * Math.sin(p * (Math.PI/2)) + firstNum;
    },

    sineEaseInOut:function(p, n, firstNum, diff) {

        var c=firstNum+diff;
        return -c/2 * (Math.cos(Math.PI*p) - 1) + firstNum;
    }   
}

});

Answer 1

只需在此处添加 animateCaption() 函数：

      function initiliaze() { 
        animateCaption(); // add this here
 if (settings.sliderWidth > $(window).width()) {...etc...etc...

    .....