per fermare l'animazione ti basta usare la funzione clearInterval(onMouseover) e per farla riprendere richiami nuovamente il setInterval(onMouseOut).
per fermare l'animazione ti basta usare la funzione clearInterval(onMouseover) e per farla riprendere richiami nuovamente il setInterval(onMouseOut).
Sono riuscito a interrompere il ciclo quando passo sopra col mouse (senza capire però la funzione 'cicla' che tu hai realizzato) ma non riesco a riavviare il ciclo quando lo tolgo.
codice:<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://jquery.offput.ca/js/jquery.timers.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('div.accordion> div').hide(); $('div.accordion> div:first').show(); $('div.accordion> h3.titolo').click(function() { $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast'); }); i=1; ciclo = setInterval(cicla,5000); function cicla(){ var obj = $('div.accordion> h3.titolo').get(i); $(obj).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast'); if(i>= $('div.accordion> h3.titolo').length) i=0; else i++; } }); </script> </head> <body> <div class="accordion" style="height: 200px; width: 200px; background-color: red;"> <h3 class="titolo">Titolo 1</h3> <div class="content" onmouseover="clearInterval(ciclo);"> Contenuto 1 </div> <h3 class="titolo">Titolo 2</h3> <div class="content" onmouseover="clearInterval(ciclo);"> Contenuto 2 </div> <h3 class="titolo">Titolo 3</h3> <div class="content" onmouseover="clearInterval(ciclo);"> Contenuto 3 </div> </div> </body> </html>
onmouseout="i=0;ciclo = setInterval(cicla,5000);"
La funzione cicla va fuori dal document.ready
Allora con il tuo aiuto sono riuscito a fare qualcosina.. (preciso che non conosco js)
ora mi succede che l'ultimo div (il terzo) ha un tempo di transizione che è oò doppio degli altri... come mai?!
codice:<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> // Gestisce lo scorrimento automatico dell'accordion, non essendo jquery va fuori del document.ready i=1; ciclo = setInterval(cicla,7000); function cicla(){ var obj = $('div.accordion> h3.titolo').get(i); $(obj).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast'); if(i>= $('div.accordion> h3.titolo').length) i=0; else i++; } $(document).ready(function() { $('div.accordion> div').hide(); $('div.accordion> div:first').show(); $('div.accordion> h3.titolo').click(function() { $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast'); }); $('div.accordion .content').mouseover(function() { clearInterval(ciclo); }) // Riavvia lo scorrimento automatico dell'accordion $('div.accordion .content').mouseout(function() { i=0; ciclo = setInterval(cicla,7000); }); }); </script> </head> <body> <div class="accordion" style="height: 200px; width: 200px; background-color: red;"> <h3 class="titolo">Titolo 1</h3> <div class="content"> Contenuto 1 </div> <h3 class="titolo">Titolo 2</h3> <div class="content"> Contenuto 2 </div> <h3 class="titolo">Titolo 3</h3> <div class="content"> Contenuto 3 </div> </div> </body> </html>
Permessi di invio
Rispondi quotando