Question

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

HTML：

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

JQUERY：

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

我喜欢它，所以我的.delete宽度动画为150px，那么“删除？”文字出现。现在，“删除？”文本几乎出现，而.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?");
   });
 });

将获取所需的结果（动画后的文本更改）

jQuery函数，一次发生一个多个事件

2 个答案: