使用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);
});