CODEWITHSUNDEEP
javascriptjqueryjquery-animatejquery-events
Shadi Almosri
Shadi Almosri

Reputation: 11989

How to block JQuery actions while a previous action is still taking place

I have a a div in a page that slides up on hover, and then back down on hover out. If you were then to hover in and out on the item, then all the actions will be queued and thus triggered, causing the object to keep sliding up and down even though you are no longer interacting with it.

You can see this in action on the site I am developing here. Simply hover over the large image in the center to see the information div to appear.

Ideally what should happen is that while an animation is taking place no further actions should be queued.

Here is my current code:

$(document).ready(function(){
    $(".view-front-page-hero").hover(
       function() {
            $hero_hover = true;
            $('.view-front-page-hero .views-field-title').slideDown('slow', function() {
                // Animation complete.
            });
       },
       function() {
            $hero_hover = false;
            $('.view-front-page-hero .views-field-title').slideUp('slow', function() {
                // Animation complete.
            });
       }
    );
});

Upvotes: 3

Views: 429

Answers (3)

onront
onront

Reputation: 1

$(document).ready(function(){
var continue=true;
    $(".view-front-page-hero").hover(
       function() {
         if(continue){
            $('.view-front-page-hero .views-field-title').slideDown('slow', function() {
                continue=false;
            });
          }
       },
       function() {
         if(continue!){
            $('.view-front-page-hero .views-field-title').slideUp('slow', function() {
                continue=true;
             });      
          }
       }
    );
});

//this will make your code work correctly...

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186013

This is probably not the best solution, but if you run stop(true, true) before the animation, it should work.

Live demo: http://jsfiddle.net/TetVm/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Create a global variable. When the animation starts. Clear it when it completes. Set a condition to exit the function if this variable is set before calling the animation.

Upvotes: 2

Related Questions