Question

我的页面上有三张图片：

    <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并按顺时针方向执行此操作，每个脚本之间有延迟？

Answer 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。

Answer 2

这样的事情：

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

我将这样的代码用于FadeOut一些消息框，一个接一个。

Jquery循环不透明图像的淡化

2 个答案: