jquery - 具有多个事件的 jQuery 函数，一次发生一个事件

Question

我有一个相当简单的问题。我想让一个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 动画时几乎会出现文本。

有什么建议么？谢谢！

Answer 1

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

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

Answer 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?");
   });
 });

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