CODEWITHSUNDEEP
javascriptjqueryjquery-events
Subhajit Panja
Subhajit Panja

Reputation: 1240

How to add multiple event (mouseover/mouseout) into one selector

If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity.

I want that it will take only one event for animation during animation times; even when multiple event triggered. Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.

$(document).ready(function () {
    $("button").mouseover(function () {
        $(this).css({
            background: 'transparent',
            color: '#09F'
        });
        $("button").animate({
            width: "110%",
        }, 900);
        $(this).text("Show More >");
    });
    $("button").mouseout(function () {
        $(this).css({
            background: '#09F',
            color: '#FFF'
        });
        $("button").animate({
            width: "100%",
        }, 900);
        $(this).text("Show More");
    });
});

Here's an JSFiddle to show you the behaviour

Upvotes: 2

Views: 1557

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Use this : add another event after finishing previous one.

$(document).ready(function(){
     $("button").mouseover(function() {
          $( this ).css({background :'transparent',color : '#09F'}); 
          $( "button").stop().animate({width: "110%",}, 900 ); 
          $(this).text("Show More >"); 
       }).mouseout(function() { 
           $( this ).css({background :'#09F',color : '#FFF'}); 
           $( "button").stop().animate({width: "100%",}, 900 );
           $(this).text("Show More"); 
       });

});

Upvotes: 1

Aziz
Aziz

Reputation: 171

Yes every time because you have some duration for example 

$('somelemenent').animate({}, 400);

Your animation will stay in order if you hover element more quickly than your duration. For this cases, you should set:

$('somelement').stop().animate(/* and your properties */);

Method .stop() stops all effects and orders which have connection with current element.

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You need to use .stop()

Stop the currently-running animation on the matched elements.

Use

$(document).ready(function () {
    $("button").mouseover(function () {
        $(this).css({
            background: 'transparent',
            color: '#09F'
        });
        $("button").stop().animate({ //Here used stop
            width: "110%",
        }, 900);
        $(this).text("Show More >");
    });
    $("button").mouseout(function () {
        $(this).css({
            background: '#09F',
            color: '#FFF'
        });
        $("button").stop().animate({ //Here used stop
            width: "100%",
        }, 900);
        $(this).text("Show More");
    });
});

DEMO

Upvotes: 3

Related Questions