jQuery的 - 動畫功能

我有一段代碼如下所示：jQuery的 - 動畫功能

$(".tagArea li").mouseover(function(){ 
    $(this).animate({ 
     borderWidth: "2px" 
    }, 1000); 
}); 
$(".tagArea li").mouseout(function() { 
$(this).animate({ 
     borderWidth: "1px" 
    }, 1000); 
});

當我嘗試將鼠標懸停在某個特定列表項，它正確動畫，但不會停止做一次。它繼續做2或3次。

如何避免這種情況，我嘗試了很多次，但沒有出現積極的結果。

請幫忙。

來源

2012-12-20 Arunkumar Srisailapathi

你能提供[** jsFiddle **]（http://jsfiddle.net）？ –

Inst通過jQuery進行動畫製作，您可以使用CSS3 Transitions和：hover。

 
.tagArea li { 
    -webkit-transition: border-width .25s; 
    -moz-transition: border-width .25s; 
      transition: border-width .25s; 
    border-width: 1px; 
} 

.tagArea li:hover { 
    border-width: 2px; 
}

來源

2012-12-20 11:00:59 Beardy

獲得解決方案好吧，試試吧。謝謝 –

感謝您的代碼。按我的預期，這幾乎可以正常工作。 –

試試這個：

$(".tagArea li").mouseover(function(){ 
    $(this).animate({ 
     borderWidth: "2px" 
    }, 1000); 
}) 
.mouseout(function() { 
$(this).animate({ 
     borderWidth: "1px" 
    }, 1000); 
});

詳細參考已http://api.jquery.com/mouseover/

來源

2012-12-20 10:58:38

我也試過了。同樣的事情發生。感謝 –

請嘗試從http://api.jquery.com/mouseover/ –

給出。在這種情況下，你可以使用.stop()，你可以鏈的事件：

$(".tagArea li").mouseover(function(){ 
    $(this).stop().animate({ 
     borderWidth: "+=5px" 
    }, 500); 
}).mouseout(function() { 
    $(this).stop().animate({ 
     borderWidth: "1px" 
    }, 500); 
});

結賬小提琴：http://jsfiddle.net/YzaCZ/

來源

2012-12-20 10:59:50 Jai

jQuery的 - 動畫功能

回答

相關問題