如何在懸停時停止javascript（字幕）？

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/