2

在我正在开发的 web 应用程序中，我想创建一些滑块 div，它们将分别通过 mouseover 和 mouseout 上下移动。我目前使用 JQuery 的hover()功能实现它，根据需要使用animate()和减少/增加它的topcss 值. 实际上，这工作得很好。

问题是它往往会卡住。如果将鼠标移到它上面（尤其是靠近底部），然后快速移开它，它会连续上下滑动，直到完成 3-5 个循环才会停止。对我来说，这个问题似乎与一个动画在另一个动画完成之前开始有关（例如，两个动画试图运行，所以它们来回滑动。）

好的，现在是代码。这是我正在使用的基本 JQuery：

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

我还重新创建了JSFiddle中的行为。

关于发生了什么的任何想法？:)

==编辑==更新的JSFiddle

4

5 回答 5

3

您可以使用.stop()也可以使用外部容器位置

$(document).ready(function() {
    $('.slider').hover(
        /* mouseover */
        function(){
            $(this).stop().animate({
                    top : $('.outer').position().top
            }, 300);
        },
        /* mouseout*/
        function(){
            $(this).stop().animate({
                top : $('.outer').position().top + 120
            }, 300);
        }
    );
});
​

演示

希望这可以帮助

于 2012-06-04T14:56:24.793 回答
3

它并不完美，但添加.stop(true,true)会阻止您看到的大部分内容。

http://jsfiddle.net/W5EsJ/18/

如果您从下往上快速悬停，它仍然会闪烁，因为您将鼠标移出 div 导致 mouseout 事件触发，从而使 div 向下移动。

您可以通过减少延迟来减少闪烁，但它仍然会存在，直到延迟为 0（无动画）

更新

我想了想，意识到有一个明显的解决方案。类似 Hoverintent 的功能！

http://jsfiddle.net/W5EsJ/20/

$(document).ready(function() {
    var timer;
    $('.slider').hover(
        /* mouseover */
        function(){
            var self = this;
            timer = setTimeout(function(){
                $(self).stop(true,true).animate({
                    top : '-=120'
                }, 300).addClass('visible');
            },150)
        },
        /* mouseout*/
        function(){
            clearTimeout(timer);
            $(this).filter(".visible").stop(true,true).animate({
                top : '+=120'
            }, 300).removeClass("visible");
        }
    );
});
于 2012-06-04T15:43:51.953 回答
1

无法重现您的问题，但我相信这hover会被多次调用。要解决此问题，您可以检查 div 是否已在动画中。如果是，则不要再次运行另一个动画。

添加以下代码来检查 div 是否已经“动画化”：

if ($(this).is(':animated')) {
   return;
}

代码： http: //jsfiddle.net/W5EsJ/2/
参考：http://api.jquery.com/animated-selector/

于 2012-06-04T14:49:37.847 回答
1

我理解了这个问题并重现了它，它发生在从下往上悬停时。鼠标悬停是导致问题的原因，因为当鼠标悬停在图像上时将调用动画函数。您需要通过使用鼠标进入和鼠标离开来控制此处发生的情况，查看类似的示例：Jquery Animate on Hover

于 2012-06-04T15:01:29.690 回答
1

之所以这样，是因为悬停正在排队，导致它多次上下滑动。有一个名为 hoverIntent 的插件可以解决这个问题。 http://cherne.net/brian/resources/jquery.hoverIntent.html

如果您决定使用 hoverIntent，您唯一需要更改的代码是 .hover > .hoverIntent

于 2012-06-04T15:06:14.717 回答