CODEWITHSUNDEEP
jqueryanimationmouseoutmouseenter
Ata Mohammadi
Ata Mohammadi

Reputation: 3530

Jquery animation on mouseover and stop on mouseout

i have six buttons with this code :

$('img#b1').on('mouseenter', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').animate({
        'width' : '1100'
    }, 200);
    }
});
$('img#b1').on('mouseout', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').animate({
        'width' : '990'
    }, 200);
    }
});

it works but if you quickly move mouse over and out for few times then take mouse out, it will resume the animation for times mouse went over it.

i dont want to resume animation if mouse is not over it.

how can i fix that?

Upvotes: 3

Views: 11708

Answers (3)

Imran Rashid
Imran Rashid

Reputation: 3492

Here is perfect example of this.

$('img#b1')
  .hover(function() {
    $(this).stop().animate({ width: 1100 }, 'fast');
  }, function() {
    $(this).stop().animate({ width: 990 }, 'fast');
  });

http://css-tricks.com/full-jquery-animations/

Upvotes: 4

ducdhm
ducdhm

Reputation: 1952

You should code like the following:

$('img#b1').on({
    mouseenter: function() {
        var height = $('div#b1').css('height');
        if(height === '50px'){
            $('div#b1').stop().animate({
                width: 1100
            }, 200);
        }
    },
    mouseout: function() {
        var height = $('div#b1').css('height');
        if(height === '50px'){
            $('div#b1').stop().animate({
                width: 990
            }, 200);
        }
    }
});

It makes your code more clearly.

Upvotes: 2

Vertigo
Vertigo

Reputation: 2746

You need to stop animation like this:

$('img#b1').on('mouseenter', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').stop().animate({
        'width' : '1100'
    }, 200);
    }
});
$('img#b1').on('mouseout', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').stop().animate({
        'width' : '990'
    }, 200);
    }
});

Upvotes: 1

Related Questions