Jquery animation à la souris et arrêtez-vous sur mouseout

j'ai six boutons avec ce 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);
    }
});

il fonctionne, mais si vous déplacer rapidement la souris au-dessus et à l'extérieur pour quelques moments, puis prendre la souris, il va reprendre l'animation pour les moments de la souris est allé.

je ne veux pas reprendre l'animation si la souris n'est pas dessus.

comment puis-je régler ce problème?

OriginalL'auteur Ataomega | 2012-04-24

  1. 2

    Vous devriez le code suivant:

    $('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);
        }
    }
});

    Il rend votre code plus clairement.

    OriginalL'auteur ducdhm

  2. 4

    Ici est l'exemple parfait.

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

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

    OriginalL'auteur Imran Rashid

  3. 1

    Vous avez besoin d'arrêter l'animation comme ceci:

    $('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);
    }
});

    OriginalL'auteur Vertigo