1

我有一组四个 DIV，每个都有一个段落的标题。我希望每个 DIV 在悬停时展开以显示一小段，然后在鼠标悬停时收缩。jQuery 运行正常。唯一的问题是，如果我快速在四个 DIV 上来回跟踪光标几次，它似乎会破坏该功能。

它所做的只是随机扩展和收缩各种 DIV，没有任何可辨别的模式。

    $('#iam_writer').hover(function(){
        $(this).animate({'height' : '120px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });                                     
    });     
    $('#iam_social').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_creative').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_strategic').hover(function(){
        $(this).animate({'height' : '140px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '30px'}, 'fast');
        });
     });

也许有更好的方法来实现这一目标？

4

1 回答 1

1

mouseleave每次将鼠标悬停在 上面时，您都会绑定事件。.hover还接受两个参数：一个用于 mouseenter 的函数，一个用于 mouseleave 的函数，因此您可以这样编写：

$('#iam_writer').hover(function(){
    $(this).stop().animate({'height' : '120px'}, 'slow');
}, function () { 
    $(this).stop().animate({'height' : '25px'}, 'fast');
});

我还添加.stop了如果触发另一个动画（当您快速移入和移出元素时发生），则任何当前动画都会停止。

于 2013-02-23T02:24:19.890 回答