图像的Jquery循环不透明度淡入淡出答案

【问题标题】：Jquery loop opacity fadein of images图像的Jquery循环不透明度淡入淡出
【发布时间】：2011-03-12 20:13:23
【问题描述】：

我的页面上有三张图片：

    <div class="imagesmall fader1 opacity1"><img src="/images/mercedes.png" /></div>
<div class="imagesmall2 fader2 opacity1" style="margin-left:5px;"><img src="/images/house.png" /></div>
<div class="imagesmall2 fader3 opacity1" style="margin-left:5px;"><img src="/images/polo.png" /></div>

opacity1 类使用 css 为它们提供了 0.6 的不透明度。

我如何使用 Jquery 创建一个脚本，将它们分别设置为不透明度 1.0，然后再设置回不透明度 0.6，并在它们之间有延迟时顺时针执行此操作？

【问题讨论】：

你可以使用setTimeout和animate。

标签： jquery loops opacity

【解决方案1】：

您可以使用fadeTo() 和delay()：

$(document).ready(function() {
    performEffect($("div.opacity1:first"), 1000);

    function performEffect($div, delay)
    {
        $div.fadeTo("slow", 1).fadeTo("slow", 0.6, function() {
            var $next = $div.nextAll("div.opacity1");
            if (!$next.length) {
                $next = $("div.opacity1");
            }
            performEffect($next.first().delay(delay), delay);
        });
    }
});

您可以测试该实现here。

【讨论】：

【解决方案2】：

类似这样的：

var TimeOut = 4;
$('.opacity1').each(function() {
    setTimeout(function(ele) {
        ele.animate({opacity: 1}, 5000, function() { ele.animate({opacity: 0.6}); }
    }, 1000 * timeOut++, $(this));
};

我使用这样的代码一个一个地淡出一些消息框。

【讨论】：