Question

我目前正在开发一个包含许多动画的网页。

代码示例

<div id="a1">
    <img src="aaa/Test1.png" style="display:none;" id="img1"/>
</div>
<div id="a2">
    <img src="aaa/Test2.png" style="display:none;" id="img2"/>
</div>
<div id="a3">
    <img src="aaa/Test3.png" style="display:none;" id="img3"/>
</div>
<script>        
    $("#img1").fadeIn(3000);
    $("#img2").fadeIn(3000);
    $("#img3").animate({
             'marginLeft' : "0px"
        }, 2000);
</script>

我想添加在每个动画结束后调用的公共回调。我不想写像

$("#img1").fadeIn(3000,function(){callback();});
$("#img2").fadeIn(3000,function(){callback();});
$("#img3").animate({
   'marginLeft' : "0px"
}, 2000,function(){callback();});

我只想添加回调作为一个整体（比如给jquery $（'div'）中的所有div赋予样式.css（“height”，“100px”）;）

是否有任何类似的代码可以回调页面中的所有动画？

Answer 1

你真的需要绑定每个img吗？如果绑定属性相同，那么最好给它们一个类和目标。

反正：

$("#img1").fadeIn(3000,callback); //notice the use of the function name without trailing "()"
$("#img2").fadeIn(3000,callback);

function callback() {
//you can use $(this) here
}

Answer 2

ID用于制作商品唯一标识符。使用类

更改所有图片代码并添加课程

<img src="aaa/Test1.png" style="display:none;" class="my_img"/>

然后在jquery中使用

$(".my_img").fadeIn(3000,function(){callback();});

或任何你想要的东西。这个代码将fadeIn绑定到所有带有“my_img”类的项目，如果你想将它绑定到div中具有my_img类的所有图像你可以使用

$("div img.my_img").fadeIn(3000,function(){callback();});

如何为页面中的所有动画添加公共回调？

2 个答案: