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

发布于 2024-10-21 10:24:23 字数 518 浏览 4 评论 0原文

我的页面上有三个图像：

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

原文

I have three images on my page:

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

The class of opacity1 gives them all an opacity of 0.6 using css.

How can i, using Jquery, create a script that will set each of them individually to opacity 1.0 then back to opacity 0.6 and do this clockwise with a delay between each of them?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟酉 2024-10-28 10:24:23

您可以使用 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);
        });
    }
});

您可以在此处测试该实现。

You can use fadeTo() and 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);
        });
    }
});

You can test that implementation here.

回复收藏 0 原文

铁憨憨 2024-10-28 10:24:23

像这样的事情：

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

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

Something like this:

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

I use this such of code to FadeOut some Message boxes, one by one.

回复收藏 0 原文

~没有更多了~