javascript - Fade in/out text slideshow -
javascript - Fade in/out text slideshow -
i'm trying think of way accomplish slideshow effect text, essentialy starts automatically , displays first h4 element fades away , fades in next one, , on h4 elements, 1 time reaches lastly 1 should repeat again.
sample markup test is
<div id="slideshow"> <h4 class="slideshow-element">test 1</h4> <h4 class="slideshow-element">test 2</h4> <h4 class="slideshow-element">test 3</h4> <h4 class="slideshow-element">test 4</h4> </div>
where h4 overlaid on each other , hidden. nice know how add together more css properties besides fade in , out acheive various effect. know there plugins this, want specific lightweight solution work on number of h4 elements.
so far figured out nit create loop define function responsible adding various effects , 1 time finished calls again. guess can utilize classes add together h4 elements apply styles them , maybe transitions?
here's jsfiddle
here's jquery:
jquery(document).ready(function(){ $(function(){ $('#slideshow h4:gt(0)').hide(); setinterval(function(){ $('#slideshow :first-child').fadeout(2000) .next('h4').fadein(2000) .end().appendto('#slideshow');}, 2000); }); });
pretty much does, fades out first kid of slideshow, fades in next kid , appends first kid end of series of h4's
javascript jquery css css3
Comments
Post a Comment