Question

我正在使用jQuery中的animate函数在用户将鼠标悬停在元素上时重新调整内容区域的大小。

该脚本运行正常，但如果元素不止一次悬停，我无法解决如何停止脚本多次调整大小的问题。

我创建了一个jsfiddle here我还添加了我使用过的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);
});

使用jQuery动画功能扩展内容区域

1 个答案: