javascript - 使用 jQuery animate 函数扩展内容区域

Question

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

该脚本工作正常，但如果元素多次悬停在上面，我无法弄清楚如何阻止脚本多次调整大小。

我在这里创建了一个 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);
});