Come posso interrompere javascript (tendone) su hover? - javascript, html

Voglio interrompere il movimento del testo quando lo alzo e poi riavvio quando non si passa il mouse.

Questo è il javascript che uso per far muovere il testo.

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

Questo è per il testo.

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

risposte:

È possibile interrompere un'animazione con il stop() funzione. Tuttavia, l'animazione viene quindi completamente arrestata e deve essere ricreata in seguito. Per rianimare l'elemento, hai bisogno di una quantità minore di tempo (perché l'elemento ha già fatto un certo percorso). Quindi, è necessario calcolare la quantità di millisecondi per completare l'animazione alla stessa velocità. Il hover() la funzione ti consente di reagire con gli eventi mouse over e mouse out. Non ho rinominato le tue variabili, ma ti suggerisco di usare nomi di variabili significativi. ob, ww e tw non è significativo e quindi non è mantenibile. Naturalmente, il mio frammento di codice potrebbe essere migliorato secondo il concetto DRY: è comunque solo una dimostrazione di concetto. Non sono nemmeno sicuro, perché lavori con gli eventi qui. Potresti rifattorizzare il tuo codice e non usare a marquee evento.

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

Ecco un violino: http://jsfiddle.net/59r7a2ka/2/