用于悬停的jQuery动画

Question

我试图在将鼠标悬停在锚元素上时为其设置动画效果。当我将鼠标悬停在标志上时，第一个图像完成后，图像需要向上和向下。当鼠标离开它时，当前元素（第2个）应该向上，当它离开时，第一个元素应该向下。

我知道如何为此设置动画，但是当我将鼠标悬停在我的锚点元素上方时，我遇到了麻烦。有时两张图片（第一张&第二张出现）等。

这是我已经得到的，我该如何正确地做到这一点？

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    logo.unbind('mouseleave', outHandler); 
    brush.animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     house.animate({ 
      "top": "42px" 
     }, 250,function(){ 
      logo.bind('mouseleave', outHandler); 
     }); 
    } 
    ); 
} 
var outHandler = function() { 
    logo.unbind('mouseenter', inHandler); 
    house.animate({ 
     "top": "-21px" 
    }, 250, function() { 
     brush.animate({ 
      "top": "39px" 
     }, 250,function(){ 
      logo.bind('mouseenter', inHandler); 
     }); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

正确回答我的问题后，我好不容易用下面的代码来工作了这一点：

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    if(brush.is(':animated')) { 
     return; 
    } 
    brush.stop(true,true).animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     if(house.is(':animated')) { 
      return; 
     } 
     house.animate({ 
      "top": "42px" 
     }, 250); 
    } 
    ); 
} 
var outHandler = function() { 
    house.stop(true,true).animate({ 
     "top": "-21px" 
    }, 250, function() { 
     if(brush.is(':animated')) { 
      return; 
     } 
     brush.animate({ 
      "top": "39px" 
     }, 250); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

Answer 1

要么你应该叫.stop(true, true)调用.animate()（环内）之前，或者你可以创建一些类似的语句。

brush.stop(true, true).animate({}); // ... 

这可以确保所有动画都将停止对brush开始一个新的人之前。 .stop()的参数是“CleartQueue”和“JumpToEnd”。

if(!brush.is(':animated')) {} 

确保只有在目前没有动画正在进行时才会调用.animate()。

参考：.stop()，:animated