CODEWITHSUNDEEP
jqueryeventslistener
user1669532
user1669532

Reputation: 13

jQuery function with multiple events that happen one at a time

I have a rather simple questions. I'd like to make a jquery function work so when I mouseenter a div, multiple events happen, one at a time, not all together. Would I simply delay?

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

I'd like it so my .delete width is animated to 150px, THEN the "Delete?" text appears. Right now, the "Delete?" text pretty much appears while .delete is animating.

Any suggestions? Thanks!

Upvotes: 0

Views: 94

Answers (2)

scott.korin
scott.korin

Reputation: 2597

The third parameter to the animate function is a callback function for when the animation completes. So you can set the text after the animation is done

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

Upvotes: 1

Anujith
Anujith

Reputation: 9370

Try Using the callback function:

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

which will fetch you desired result (text change after animation)

Upvotes: 0

Related Questions