javascript - Firefox setTimeout + jQuery fade loop inconsistent, stops early, won't cycle -


http://jsfiddle.net/x6pcd/11/

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

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -