如何为页面中的所有动画添加通用回调

How to add common callback for all the animations in a page?

本文关键字：动画 添加 回调      更新时间：2023-09-26

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

代码示例

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

我只是想添加回调作为一个整体(就像给所有的jquerydiv样式$('div').css("height"，"100px");)

是否有这样的代码给回调到所有的动画在一个页面?

你真的需要绑定每一个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
}

ID用于使项目成为唯一标识符。使用类

更改所有图像标签并添加类

<img src="aaa/Test1.png" style="display:none;" class="my_img"/>
然后在jquery中使用 
$(".my_img").fadeIn(3000,function(){callback();});

或任何你想要的。这段代码将fadeIn绑定到所有类为"my_img"的项目上，如果你想将它绑定到类为my_img的div中的所有图像上，你可以使用

$("div img.my_img").fadeIn(3000,function(){callback();});
相关文章：