使用jQuery動畫功能擴展內容區域

Question

當用戶將鼠標懸停在元素上時，我正在使用jQuery中的動畫功能來調整內容區域的大小。

該腳本可以正常工作，但是如果該元素懸停不止一次，我無法解決如何停止調整腳本的大小。

我在這里創建了一個jsfiddle ，還添加了我使用的js。

var minheight = $('.section-fade').css("height");
$('.section-fade').hover(

function () {
    $(this).animate({
        height: $('.childsection').height()
    }, 1000);
},

function () {
    $(this).animate({
        height: minheight
    }, 1000);
});

任何想法都將受到歡迎。

干杯

Answer 1

您正在尋找的是.stop() 。

.stop()將取消對象上的所有動畫。

http://jsfiddle.net/zxm9S/1/

var minheight = $('.section-fade').css("height");
$('.section-fade').hover(

function () {
    $(this).stop().animate({
        height: $('.childsection').height()
    }, 1000);
},

function () {
    $(this).stop().animate({
        height: minheight
    }, 1000);
});