jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何一次一个动画一组jQuery对象(而不是一次全部动画)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试构建一个图片滑块. (我知道那里有很多插件,但这更多用于教育目的).

基本上,我有一组带z-index的图像:0.我要做的是拍摄图像集,然后选择每个图像并将索引更改为1,为不透明度设置动画,然后将其放入回到0,这样下一个图像就会做同样的事情.

这是第一部分,但我遇到的问题是,当我测试这部分时,所有图像同时进行动画.而不是一个一个地做.
我知道您可以使用回调函数,例如:

image1.animate(the animation,function({
       image2.animation(the animation,function({
                image3.animation(the animation,function}) etc...

})

但如果我有更多的图像,它会变得更复杂.我试图找到一种更有效的方法,但我找不到答案.

这是我尝试过的:

images.each(function () {
    $(this).css({
        "opacity" : "0.0","z-index" : "1"
    }).animate({
        opacity: "1.0"
    },3000);
});

但它不起作用.所有图像同时进行动画制作.我甚至尝试过“for”循环,但我得到同样的东西:

for (var i=0; i<images.length; i++){
    images.eq(i).css({
        "opacity" : "0.0",3000);
}

我知道我做错了什么,但我无法弄清楚它是什么.如果有人有任何帮助,将不胜感激!

解决方法@H_450_25@
使用 .delay(),如下所示:
images.each(function (i) {
    $(this).delay(3000*i)
           .css({ opacity : 0,"z-index": 1 })
           .animate({ opacity: 1 },3000);
});

由于这使用作为第一个参数传递给.each()回调的元素的索引,第一个参数延迟3000 * 0ms,所以根本没有延迟3000ms,等等…所以它们一个一个地动画.

大佬总结

以上是大佬教程为你收集整理的如何一次一个动画一组jQuery对象(而不是一次全部动画)全部内容,希望文章能够帮你解决如何一次一个动画一组jQuery对象(而不是一次全部动画)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。