javascript - .fadeIn() and .fadeOut() function broken? -
i'm using basic fading slide show of chris coyier's: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
everything works fine, except want multiple slideshows, each being thumbnail. when added multiple of same thing, broke. noticed uses id of slideshow, , ids have unique, changed class. works, seems have broken fadein() , fadeout() functions? or @ least, that's appears have done. here's fiddle: http://jsfiddle.net/qrzke/
html:
<div class="thumb" id="first"> <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="second"> <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="third"> <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="fourth"> <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="fifth"> <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> css:
.thumb { position: relative; width: 240px; height: 240px; padding: 10px; background: white; box-shadow: 0 0 20px rgba(0, 0, 0, .4); } .thumb > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 2; } .thumb > span { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 3; -webkit-transition: .65s ease-in; -moz-transition: .65s ease-in; -ms-transition: .65s ease-in; -o-transition: .65s ease-in; transition: .65s ease-in; } .thumb > span:hover { opacity: 0; } .thumb img { height: 240px; width: 240px; } javascript:
$(document).ready(function() { $(".thumb > div:gt(0)").hide(); setinterval(function() { $(".thumb > div:first") .fadeout(1000) .next() .fadein(1000) .end() .appendto(".thumb"); }, 2500); }); note: added image inside spans covers slide show, , have hover on make go away (as if start slideshow after hovering on it).
any ideas? appreciated.
edit: found out if remove other slideshows (having one), fade effect works fine. it's once add multiple. classes allowed non-unique, right? why script breaking? (and it's not actual script breaking, it's fading effect, otherwise slider works fine!)
i think problem appendto('.thumb') append sliders. and, span thing makes repeat loop between 2nd , 3rd pictures, never reshowing 1st. i'd rid of css fake slideshow not showing , add interval on hover. i'd way (http://jsfiddle.net/qrzke/18/):
css
.thumb { position: relative; width: 240px; height: 240px; padding: 10px; background: white; box-shadow: 0 0 20px rgba(0, 0, 0, .4); } .thumb > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 2; } .thumb img { height: 240px; width: 240px; } html
<div class="thumb" id="first"> <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="http://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="second"> <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="third"> <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="fourth"> <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="http://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> <br> <div class="thumb" id="fifth"> <div><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></div> <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9li1r21nejo1_400.jpg"></div> <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/guitar-guitar-10566054-1920-1200.jpg"></div> </div> javascript
$(document).ready(function () { var interval; $('.thumb').each( function () { var id = $(this).attr('id'); $("#" + id + " > div:gt(0)").hide(); }); $('.thumb').hover(function() { var id = $(this).attr('id'); console.log(id); interval = setinterval(function () { $("#" + id + " > div:first") .fadeout(1000) .next() .fadein(1000) .end() .appendto("#" + id); }, 2500); }, function() { clearinterval(interval); }); });
Comments
Post a Comment