Question

我想知道是否有任何方法可以制作此插件：http://www.thewebsqueeze.com/web-design-tutorials/sequential-fade-in-jquery-plug-in.html在顶部显示淡入淡出的项目？

非常感谢！

Answer 1

您可以通过撤消数组顺序和其他一些优化来反转.each()调用，如下所示：

(function($) {
$.fn.fadeInSequence = function(fadeInTime, timeBetween) {
    //Default Values
    timeBetween = timeBetween || 0;
    fadeInTime = fadeInTime || 500;

    //The amount of remaining time until the animation is complete.
    //Initially set to the value of the entire animation duration.
    var l = this.length, remainingTime = l * (fadeInTime+timeBetween);

    $.each(this.get().reverse(), function(i) {

        //Wait until previous element has finished fading and timeBetween has elapsed
        $(this).delay(i*(fadeInTime+timeBetween));

        //Decrement remainingTime
        remainingTime -= (fadeInTime+timeBetween);

        if($(this).css('display') == 'none')
        {
            $(this).fadeIn(fadeInTime);
        }
        else //If hidden by other means such as opacity: 0
        {
            $(this).animate({'opacity' : 1}, fadeInTime);
        }

        //Delay until the animation is over to fill up the queue.
        $(this).delay(remainingTime+timeBetween);
    });
    return this;
};

})(jQuery);

Here's a copy the demo page updated to use the backwards version

jQuery - 反转顺序淡入插件

1 个答案: