javascript - Firefox setTimeout + jQuery fade loop inconsistent, stops early, won't cycle -
i'm trying make slideshow fades between several absolute-positioned div's. on chrome, ie9, opera code below works fine. on firefox, timeout goes once or twice, stops. if remove js section marked below, loops properly.
<style> .slide {position:absolute; top:0; left:0; width:300px; height:200px} </style> <div id="slides" class="slides"> <div class="slide slide1" style="background:#c66"> <div class="swap_links"> <a href="javascript:" class="active">1</a> <a href="javascript:">2</a> <a href="javascript:">3</a> </div> </div> <div class="slide slide2" style="background:#6c6"> <div class="swap_links"> <a href="javascript:">1</a> <a href="javascript:" class="active">2</a> <a href="javascript:">3</a> </div> </div> <div class="slide slide3" style="background:#36c"> <div class="swap_links"> <a href="javascript:">1</a> <a href="javascript:">2</a> <a href="javascript:" class="active">3</a> </div> </div> </div> <script type="text/javascript"> $(function() { var fp = '#slides .slide'; var fs = 300; var t = window.settimeout(swap, 1000); $(fp).slice(1).hide(); function swap(to) { //removing section, loop plays in ff if (to) { $(fp + to).fadein(fs); $(fp).not('.slide' + to).fadeout(fs); window.cleartimeout(t); return; } $(fp).eq(1).fadein(fs); $(fp).eq(0).fadeout(fs, function() { $(this).appendto('#slides'); t = window.settimeout(swap, 1000); }); } $('#slides .swap_links a').click(function() { swap($(this).html()); }); }); </script>
firefox appears have been passing arbitrary numeric values to variable within function causing if(to){...} statement execute if passed value 0.
to fix execute swap() function without arguments in settimeout() this:
var t = window.settimeout(function(){ swap(); }, 1000); here updated demo: http://jsfiddle.net/x6pcd/14/
i hope helps!
Comments
Post a Comment