How to stop the queuing of multiple animations based on occurrence jquery


Tags: jquery,html,css,animation

Problem :

So, I have this webpage and I use this library called transit to animate 3d rotations and other css transformations. I have three links which when the mouse hovers over them they are supposed to scale up 1.2 times. It works, everything is fine and dandy, until I quickly run the mouse over the icon several times. Instead of the animation just occurring once, it occurs several times in a row (or how many times I run my mouse over it). How do I make it that no matter how many times the mouse is run over the div, it only animates once (like for a prolonged hover)?

Am I being clear?

Here the website link: LINK

Here's the jquery code:

//FYI, the div id is "rotater"    
$(function(){  // $(document).ready shorthand
                $('#background').hide(); 
                $( "#banner").hide();
                $( "#rotater").hide();
                $( ".tab" ).hide();
                $( ".content" ).hide();
                $( "#share" ).hide();
                $( ".sidenav").hide();
                $("#navigation").animate({top:"100%"});
                window.setTimeout(function(){$('#banner').fadeIn('slow');$("#navigation").animate({top:"0"});
                                             $('#background').fadeIn('slow');
                                             $("#rotater").fadeIn("fast").transition({rotateY:360, duration:3000});
                                            $( "#share" ).fadeIn("slow");$(".sidenav").fadeIn("slow");
                                            $("#ha").animate({top:"25%",left:"3%"});$("#do").animate({top:"45%",left:"3%"});
                                            $("#set").animate({top:"65%",left:"3%"});$("#net").animate({top:"25%",left:"75%"});
                                            $("#dasu").animate({top:"65%",left:"75%"});}, 1000);
                $( ".sidenav" ).hover(function(){$("#"+this.id).transition({scale:1.2});}, function(){$("#"+this.id).transition({scale:1});}); // THIS IS THE CODE IN QUESTION
                $( "#share" ).hover(function(){$( "#share" ).animate({left:"0%"});}, function(){$( "#share" ).animate({left:"-15%"});});
                var cw = $('#rotater').width();
                $('#rotater').css({'height':cw+'px'});
                setInterval(function(){$("#rotater").transition({rotateY:'+=360deg', duration:3000});},10000);

            });
            $(window).load(function() {
               $(".loader").fadeOut("slow");
            })


Solution :

If you don't want multiple jQuery animations to run sequentially, then you will want to call $(yourObj).stop() before starting each animation. You can use the arguments to .stop(a, b) to control what exactly happens - whether the animation is just stopped where it is and the new one starts from there or whether it jumps to the end state before your next one starts, etc...

See the jQuery doc for .stop() for more details. Often, what you want is this:

$(yourObj).stop(true, true);

to jump the previous animation to its end state and clear it from the queue so the next one can start immediately as if the first one had already completed. You will probably want to call this before every jQuery animation that could possibly be invoked again before the first one completes.

For example, you could change this:

$( "#share" ).hover(function(){
    $( "#share" ).animate({left:"0%"});
}, function(){
    $( "#share" ).animate({left:"-15%"});
});

to this:

$( "#share" ).hover(function(){
    $( "#share" ).stop(true, true).animate({left:"0%"});
}, function(){
    $( "#share" ).stop(true, true).animate({left:"-15%"});
});

In some cases, you don't want the 2nd argument to be set to true (so you might just want .stop(true) instead of .stop(true, true). You may want the current animation to just stop where it is and let the new animation pick it up from there - that really depends upon the specific operation and how you want it to behave.


    CSS Howto..

    How to set overflow content to go underneath instead of fitting in one row

    How to center menu css

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    CSS: How to override a class style with an enclosing div

    How to center text horizontally & vertically within dotted border

    How to Toggle Switch - Prices and Config? [closed]

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to stop user agent stylesheets from overriding my css

    How to use not css selector with * in stylesheet

    How to create hidden pop out side menu

    HTML Table Header isn't showing, how can it be fixed?

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    Is this how CSS LESS and SimpLESS work? [closed]

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    How to read contents of an external script/style?

    How to create the equivalence of CSS “ease” in jQuery?

    CSS slide page up animation- element briefly shows before the animation

    How to display Highcharts in rows (5)

    Css. How to move div with fixed position up if it overlays footer

    How to center content vertically with unknown content and fixed layout

    How to specify discrete mapper style in cytoscapejs?

    How To Add % Based Image To CSS? (for fluid layout)

    How can I set the CSS class of an element in a Rails view?

    How can I get rid of one animation in a media query?

    How to make Flexbox span multiple lines?

    How could I get a layout like the one shown in the attached image? [closed]

    how to to set chat box based on user id using css

    css how to make this checkbox smaller

    How to make scroll bar permanently visible on Mac OS using CSS or jQuery

    how to make my horizontal css dock navigation to vertical