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
Post a Comment