具有多个事件的 jQuery 函数，一次发生一个事件答案

【问题标题】：jQuery function with multiple events that happen one at a time具有多个事件的 jQuery 函数，一次发生一个事件
【发布时间】：2013-03-11 13:43:25
【问题描述】：

我有一个相当简单的问题。我想让一个jquery函数工作，所以当我鼠标输入一个div时，会发生多个事件，一次一个，而不是一起发生。我会拖延吗？

HTML：

<div class="all">
<div class="wrapper">
<div class="trashwrapper">
<div class="trash"></div>
</div>
<div class="delete">
</div>
</div>
</div>

查询：

$(".trashwrapper").on("mouseenter", function(){
   $(".delete").animate({width: "150px"}, 300);
   $(".delete").text("Delete?");
}).on("mouseleave", function(){
   $(".delete").empty("Delete?");
   $(".delete").animate({width: "0px"}, 300);
});

我希望我的 .delete 宽度动画为 150 像素，然后是“删除？”文字出现。现在，“删除？” .delete 动画时几乎会出现文本。

有什么建议吗？谢谢！

【问题讨论】：

如果你想在动画功能完成后做一些事情。然后它有一个参数来提供回调函数。用那个。有examples in the docs
顺便说一句。我认为.empty() 不接受任何参数。

标签： jquery events listener

【解决方案1】：

animate 函数的第三个参数是动画完成时的回调函数。所以你可以在动画完成后设置文字

$(".trashwrapper").on("mouseenter", function(){
   $(".delete").animate({width: "150px"}, 300, function () {
         $(".delete").text("Delete?");
   });
});

【讨论】：

【解决方案2】：

尝试使用回调函数：

$(".trashwrapper").on("mouseenter", function(){
   $(".delete").animate({width: "150px"}, 300,function(){
      $(this).text("Delete?");
   });
 }).on("mouseleave", function(){
    $(".delete").animate({width: "0px"}, 300, function(){
      $(this).empty("Delete?");
   });
 });

它将获取您想要的结果（动画后的文本更改）

【讨论】：