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?
Here is perfect example of this.
$('img#b1')
.hover(function() {
$(this).stop().animate({ width: 1100 }, 'fast');
}, function() {
$(this).stop().animate({ width: 990 }, 'fast');
});