javascript - Auto fade/show between multiple divs -


what's simple jquery script can load on webpage auto fade between each of 3 "box" divs, , repeat? i'd show div 5 seconds while hiding other two, run 1 second fade transition next.

the 3 div's stacked on top of each other.

<div class="boxes">  <div class="box1">text1</div> <div class="box2">text2</div> <div class="box3">text3</div>  </div> 

you try this:

$(document).ready(function () {     var allboxes = $("div.boxes").children("div");     transitionbox(null, allboxes.first()); });  function transitionbox(from, to) {     function next() {         var nextto;         if (to.is(":last-child")) {             nextto = to.closest(".boxes").children("div").first();         } else {             nextto = to.next();         }         to.fadein(500, function () {             settimeout(function () {                 transitionbox(to, nextto);             }, 5000);         });     }      if (from) {         from.fadeout(500, next);     } else {         next();     } } 

demo: http://jsfiddle.net/cyjla/

i'm sure cleaned and/or more efficient, put working.


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -