jQuery 图像淡入淡出序列？

发布于 2024-08-17 12:05:54 字数 562 浏览 3 评论 0原文

我有一个关于 jQuery 和图像淡入淡出的问题。我有一堆图像，我想在加载页面时将每个图像依次淡入完全不透明。我的html代码如下：

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title</h2>
   <p>Caption</p></div>
</div>

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title 2</h2>
   <p>Caption 2</p></div>
</div>

每个图像都有其自己相应的标题和说明文字，它们显示在另一个图像的下方。我想让第一张图像先淡入，然后让后面的每个图像淡入。有人有主意吗？我对 jQuery 有非常基本的了解。谢谢

原文

I have a question regarding jQuery and image fading. I have a bunch of images and I would like to fade each one sequentially to full opacity when you load the page. My html code is below:

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title</h2>
   <p>Caption</p></div>
</div>

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title 2</h2>
   <p>Caption 2</p></div>
</div>

Each image has its own corresponding Title and Caption which is displayed one below the other. I would like to have the first image fade in first, then have each following image fade in after. Anybody have an idea? I have a very basic understanding of jQuery. Thanks

分享到QQ

分享到微博

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

发布评论

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

败给现实 2024-08-24 12:05:54

您需要对动画进行排队，然后在前一个动画结束时启动每个动画：

<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />

var animations = new Array();
// queue all
$("img").each(function() {
    animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
    image.fadeIn("slow", function() {
        // wait until animation is done and recurse if there are more animations
        if(animations.length > 0) doAnimation(animations.shift());
    });
}

You'll need to queue the animations and then start each when the previous ends:

<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />

var animations = new Array();
// queue all
$("img").each(function() {
    animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
    image.fadeIn("slow", function() {
        // wait until animation is done and recurse if there are more animations
        if(animations.length > 0) doAnimation(animations.shift());
    });
}

回复收藏 0 原文

情绪 2024-08-24 12:05:54

这可能不需要您自己实现，请查看 jQuery Cycle 插件。

回复收藏 0 原文

櫻之舞 2024-08-24 12:05:54

您还可以通过延迟每个后续图像的效果来按顺序淡入它们（注意：我使用 window.load 来确保在开始动画之前加载所有图像）：

$(window).load(function() {

        var delay = 0;

        $('img').each(function() {
            $(this).delay(delay).fadeIn();
            delay += 150;
        });

    });

这对于重叠动画而不是等待非常有用直到每一项完成。它也可以像这样随机化：

$(window).load(function() {

        var delay = 0;

        $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() {
            $(this).delay(delay).fadeIn(600);
            delay += 150;
        });

    });

You can also fade them in sequentially by delaying the effect for each subsequent image like so (note: I'm using window.load to ensure all images are loaded before starting the animations):

$(window).load(function() {

        var delay = 0;

        $('img').each(function() {
            $(this).delay(delay).fadeIn();
            delay += 150;
        });

    });

This is great for overlapping the animations as opposed to waiting til each one completes. It can also be randomized like so:

$(window).load(function() {

        var delay = 0;

        $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() {
            $(this).delay(delay).fadeIn(600);
            delay += 150;
        });

    });

回复收藏 0 原文

~没有更多了~