Autorunning CSS-change

Sé que hay soluciones para resolver eso; pero quiero hacerlo en mi propia ruta (tienes que conocer tus limitaciones: Hola stackoverflow). Así que quiero una especie de carrusel, donde todo el elemento-u obtiene un margen negativo hacia la izquierda por un intervalo de tiempo establecido, siempre y cuando el usuario no se desplace por el área-ul. Así que inicialmente es algo así:

var index_versatz = -100; var index_position = 0; var index_position_vw = 0; $(document).ready(function () { index_position += index_versatz; index_position_vw = index_position + "vw"; $(".content__index ul").delay(1200) .queue(function (next) { $(this).css('margin-left', index_position_vw); next(); }); }); 

con una estructura html como esa:

  
  • Text

    Text

  • Text

    Text

  • Text

    Text

  • Text

    Text

Y para mí, como primer paso que funciona, pero solo hace esos cambios en la primera diapositiva mientras quiero que se ejecute automáticamente, siempre y cuando nadie se .content__index ul el .content__index ul – area.

Necesitaré hacer 2 cosas allí: – Usar un controlador diferente (?) Luego .ready (o decirle al script que comience de nuevo) – y una expresión if para detectar si el usuario se encuentra en el área.

Realmente ya me ayudarías mucho con el primer bloque sobre cómo ejecutar todo eso automáticamente.

Puede usar .clearQueue() para vaciar la matriz de la cola en .hover() , .stop() para detener la animación en el elemento li , .slice() para restablecer la cola del índice actual de funciones en la matriz de la cola; .promise() , .then() para realizar tareas cuando todas las animaciones se .then() completado

 $(document).ready(function() { var ul = $("ul").data("index", 0) , li = $("li", ul) // set duration , d = 1200 // create `q` array of functions to call // in sequential order, where `el` is current `li` element , q = $.map(li, function(el, index) { return function(next) { // set `ul` `data-index` to current `li` index:`q` function index ul.data("index", index) // do stuff, call next function in `q` queue .find(el).fadeIn(d).delay(d).fadeOut(d, next); } }); ul.hover( // handle at `ul` `mouseenter` event function() { // clear `ul` queue; clear, stop `li` animation queue ul.clearQueue("_fx").find(li).stop(true); } // handle at `ul` `mouseleave` event , function() { // reset `ul` queue at current `li` using `index` // set at last function called in queue ul.queue("_fx", q.slice(ul.data().index)).dequeue("_fx"); }) .delay(d, "_fx").queue("_fx", q).dequeue("_fx").promise("_fx") .then(function() { // do stuff when `ul` queue completes $(this).hide(function(){ alert("slideshow complete"); }) }) }); 
 ul { border: 1px solid blue; } ul:hover { cursor: wait; border: 2px solid sienna; } ul li { display: none; } 
  
  • Text 1

    Text 1

  • Text 2

    Text 2

  • Text 3

    Text 3

  • Text 4

    Text 4

Le recomendaría poner esto en una función, establecer una variable global que establecerá con setTimeout(function(){yourFunctionName();}, givenTime) al final de su función.

De esa manera, se llama a su función a intervalos regulares, y puede llamar a clearTimeout(yourTimeoutGlobalVariable); en evento hover.

PD: no escribí el guión completo para que puedas hacerlo a tu manera, dime si todavía estás atascado.