mostra e nasconde gli elementi della lista in una sequenza

Sto provando a mostrare e nascondere gli elementi della lista (che non posso consigliare a una singola classe) in una sequenza, cioè ritardata.mostra e nasconde gli elementi della lista in una sequenza

questo è il mio html ...

<ul id="aclass"> 
    <?php for ($i = 0; $i < count($enties); ++$i) : 
    <li class="animation"> 
     <div id="frame"> 
      &nbsp; 
     </div> 
    </li> 
    <?php endfor; ?> 
</ul>

finora ho

$(document).ready(function() { 
    function showpanel() { 
    $("ul#aclass > li").each(function() { 
     $(this).css("display", "none"); 
}); 
    setTimeout(showpanel, 200) 
});

voglio vedere il primo elemento li per due secondi, poi sostituito ma il secondo per due secondi, quindi il prossimo ecc. Non so come selezionare l'elemento "next" li e per eseguire successivamente la funzione su ciascun elemento.

Grazie per l'aiuto.

fonte

2015-04-26 tgifred

è possibile utilizzare una funzione ricorsiva con una variabile che viene incrementato per ogni corsa, qualcosa come

$(document).ready(function() { 
    (function showpanel(i, elems) { 
     i = i === elems.length-1 ? 0 : i+1; 
     elems.eq(i).show(0).delay(1000).hide(0, function() { 
      showpanel(i, elems); 
     }); 
    })(-1, $("ul#aclass > li")); 
});

FIDDLE

fonte

2015-04-26 15:32:38 adeneo

Il calcolo del 'I' potrebbe essere semplificata un po ': http://jsfiddle.net/ft9tb2cb/1/ (I' Mi chiedo perché '1' invece di' 0' per la velocità di animazione?) – Tomalak

@Tomalak - 'Funziona anche '0', il punto è che ci deve essere un numero dato per jQuery per aggiungerlo alla coda FX e fare 'delay' lavoro, e di solito uso' 1' come un millisecondo non è evidente e per me è più chiaro che la versione animata o f show/hide viene usato ecc. Inizialmente ho fatto [** this **] (http://jsfiddle.net/adeneo/ft9tb2cb/2/) ma ho cercato di renderlo almeno un po 'meno complicato suddividendolo un po ' – adeneo

Hm, la mia comprensione è che se si passa '0' allora la versione animata di show/hide non viene usata - almeno la mia variante commuta i pannelli senza jitter visivo (' 1' è in effetti notevole sulla mia macchina). – Tomalak

@tgifred Alla fine, sono riuscito a trovare la soluzione di lavoro. È così. Spero possa essere d'aiuto.

<html> 
<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 

<body> 
<ul id="aclass"> 
    <li class="animate">Panel 1</li> 
    <li class="animate">Panel 2</li> 
    <li class="animate">Panel 3</li> 
    <li class="animate">Panel 4</li> 
    <li class="animate">Panel 5</li> 
</ul> 

<script> 
    $(function() { 
     var elements = $("ul#aclass li"); 
     elements.hide(); 
     elements.each(function (i) { 
      $(this).delay(2000* i++).fadeIn(2000); 
     }); 

    }); 
</script> 
</body> 
</html>

Nel caso in cui si desidera avere visibile solo un elemento alla volta, si potrebbe fare qualcosa di simile:

<script> 
    $(function() { 
     var elements = $("ul#aclass li"); 
     elements.hide(); 
     elements.each(function (i) { 
      $(this).delay(2000 * i++).fadeIn(20).fadeOut(1800); 
     }); 

    }); 
</script>

e si può giocare con l'allentamento.

fonte

2015-04-26 15:38:39

Questo codice non viene eseguito e la risposta si interrompe a metà di una frase. Non sono sicuro di come sono stati raccolti 2 upvotes. – Tomalak

No, non funzionerebbe mai, è un ciclo che commuta la classe su tutti gli elementi allo stesso tempo, e lo fa ogni due secondi, almeno se gli errori di sintassi fossero corretti. – adeneo

Hai ragione, il mio codice non risolve il suo problema. Era inteso, in quel momento, a suggerire una direzione che potesse risolvere il problema. Il mio codice non ha mai affermato che avrebbe funzionato. Ma sarebbe quello che vorrei provare. E quello era l'uso delle classi CSS. Penso ancora che ci sia qualcosa in questo, e tornerò con una soluzione quando avrò il tempo. Per ora, modifico la risposta e ho in cima un codice che funziona e fa quasi quello che è stato chiesto di fare, ma non proprio. Ho bisogno di pensare un po 'di più per la soluzione reale, ma la vera soluzione non è presentata in giro, da quello che vedo. –

Soluzione creativa:

CSS: nascondere tutti i pannelli successivi al primo (con l'aiuto di :first-child)
jQuery: continuare a muoversi il primo figlio fino alla fine periodicamente.

$(document).ready(function() { 
 
    var panelInterval; 
 

 
    panelInterval = setInterval(function() { 
 
     $("ul#aclass > li:first-child").appendTo("ul#aclass"); 
 
    }, 200) 
 
});

ul#aclass > li { 
 
    display: none; 
 
} 
 
ul#aclass > li:first-child { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="aclass"> 
 
    <li>Panel 1</li> 
 
    <li>Panel 2</li> 
 
    <li>Panel 3</li> 
 
    <li>Panel 4</li> 
 
    <li>Panel 5</li> 
 
</ul>

fonte

2015-04-26 15:38:42 Tomalak

Bel pensiero. Ma dovresti davvero usare solo la tecnica di cambiare gli elementi DOM quando è l'unica opzione. Non è l'unica opzione in questo caso. – bowheart

Puoi spiegare perché è una cattiva idea? – Tomalak

Non penso sia difficile da vedere. Cambiare gli elementi DOM (specialmente in un caso come questo, in cui gli elementi sono apparentemente selezionabili SOLO come figli del genitore) significa che tutto ciò che nel CSS/javaScript che seleziona/agisce su quegli elementi deve anche cambiare. Se qualcuno di questi pannelli necessita di CSS o jQuery applicati in modo specifico a loro, diventerà rapidamente molto difficile selezionarli. – bowheart

Provare a utilizzare $ .Next().

$(document).ready(function() { 

    function showpanel($toShow, $toHide) { 
     if ($toHide) { 
      $toHide.hide(); 
     } 
     $toShow.show(); 
     setTimeout(showpanel, 200, $toShow.next(), $toShow) 
    }); 

    showpanel($("ul#aclass > li").hide().first()) 

});

fonte

2015-04-26 15:45:53 HDN

controllare fuori:

function showpanel(current, elems) { 
    return function() { 
     current = current < elems.length - 1 ? current + 1 : 0; 
     elems.hide().eq(current).show(); 
    } 
}; 

setInterval(showpanel(0, $("#aclass li")), 200)

DEMO

fonte

2015-04-26 15:47:50 marsh

mostra e nasconde gli elementi della lista in una sequenza

risposta

Problemi correlati