Question

我希望在我悬停时停止移动文本，然后在不悬停时重新启动。

这是我用来移动文字的javascript。

$(document).ready(function() {
    $('.scrollingtext').bind('marquee', function() {
        var ob = $(this);
        var tw = ob.width();
        var ww = ob.parent().width();
        ob.css({ right: -tw });
        ob.animate({ right: ww }, 30000, 'linear', function() {
            ob.trigger('marquee');
        });
    }).trigger('marquee');
});

这是为了文本。

<div class="scroller">
    <div class="scrollingtext">
        Moving text
    </div>
</div>

Answer 1

您可以使用stop()功能停止动画。但是，动画然后完全停止，之后需要重新创建。要再次为元素设置动画，您需要更少的时间（因为元素已经完成了某个路径）。因此，您需要计算以相同速度完成动画的毫秒数。 hover()函数允许您对鼠标悬停和鼠标移出事件做出反应。我没有重命名你的变量，但我建议你使用有意义的变量名。 ob，ww和tw没有意义，因此无法维护。当然，我的代码片段可以根据DRY概念进行改进：但它只是概念的证明。我也不确定，为什么你在这里处理活动。您可以重构代码而不使用marquee事件。

$(document).ready(function() {
    var ob = $('.scrollingtext');
    var speed = 10000;

    ob.bind('marquee', function() {
        var tw = ob.width();
        var ww = ob.parent().width();
        ob.css({ right: -tw });
        ob.animate({ right: ww }, speed, 'linear', function() {
            ob.trigger('marquee');
        });
    }).trigger('marquee');

    ob.hover(function() {
        ob.stop();
    }, function() {
        var tw = ob.width();
        var ww = ob.parent().width();
        var cur = parseInt(ob.css('right'), 10);
        var speedDecrease = 1 - ((cur + tw) / (ww + tw));
        ob.animate({ right: ww }, speedDecrease * speed, 'linear', function() {
            ob.trigger('marquee');
        });
    });
});

这是一个小提琴：http://jsfiddle.net/59r7a2ka/2/

如何在悬停时停止javascript（选框）？

1 个答案: