0

かなり単純な質問があります。jquery関数を機能させたいので、divをマウスで入力すると、複数のイベントが一度に1つずつ発生し、すべてが同時に発生するわけではありません。私は単に遅らせますか？

HTML:

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

Jクエリ:

$(".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 のアニメーション中にテキストが表示されます。

助言がありますか？ありがとう！

4

2 に答える 2

1

animate関数の 3 番目のパラメーターは、アニメーションが完了したときのコールバック関数です。そのため、アニメーションが完了した後にテキストを設定できます

$(".trashwrapper").on("mouseenter", function(){
   $(".delete").animate({width: "150px"}, 300, function () {
         $(".delete").text("Delete?");
   });
});
于 2013-03-11T13:47:28.427 に答える
0

コールバック関数を使用してみてください:

$(".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?");
   });
 });

これにより、目的の結果が取得されます（アニメーション後のテキスト変更）

于 2013-03-11T13:46:28.563 に答える