Jak mogę zatrzymać javascript (markiza) po najechaniu myszą? - javascript, html

Chcę zatrzymać przenoszenie tekstu, gdy go zatrzymuję, a następnie ponownie uruchomić, gdy m nie uniesie się.

To jest javascript, którego używam do przenoszenia tekstu.

$(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");
});

To jest dla tekstu.

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

Odpowiedzi:

Możesz zatrzymać animację za pomocą stop() funkcjonować. Jednak animacja jest następnie całkowicie zatrzymana i musi zostać odtworzona później. Aby ponownie animować element, potrzebujesz mniej czasu (ponieważ element wykonał już określoną ścieżkę). Więc musisz obliczyć liczbę milisekund, aby zakończyć animację z tą samą prędkością. The hover() funkcja pozwala reagować na zdarzenia myszy i wysuwanie myszy. Nie zmieniłem nazw zmiennych, ale sugeruję używanie znaczących nazw zmiennych. ob, ww i tw nie ma sensu i dlatego nie może być utrzymany. Oczywiście mój fragment kodu może zostać ulepszony zgodnie z koncepcją DRY: jest to jednak tylko dowód koncepcji. Nie jestem też pewien, dlaczego pracujesz tutaj nad wydarzeniami. Możesz zmienić kod, a nie używać marquee zdarzenie.

$(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");
});
});
});

Oto skrzypce: http://jsfiddle.net/59r7a2ka/2/