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

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();});