jQuery動畫適用於Firefox，但不適用於其他瀏覽器

Question

我正在使用滑塊插件。它的工作原理是在Firefox中，但在Chrome，IE和Safari中，而不是左移動畫，而不是減小寬度會降低高度。 http://htc1swallpapers.zxq.net/jquery.squares.html

HTML和CSS

<div id="container"></div> 


#container{ 
    position:relative; 
    width: 854px; 
    height: 418px; 
    margin: 100px; 
    border: 3px solid #333; 
    overflow: hidden; 
} 
.bar{ 
    position: absolute; 
    top: 0; 
    opacity: 0; 
} 



$(document).ready(function() { 
    $('#container').myplugin({sw: 60, sh: 60, animation: 'vertical'}); 
// setTimeout(function(){$('#container').myplugin({sw: 60, sh: 60, animation: 'horizontal'});}, 15000); 
}); 

jQuery插件

// JavaScript Document 
(function($){ 
    $.fn.extend({ 

     myplugin: function(settings){ 

      var defaults = { 
       speed: 200, 
       easing: 'fadeout', 
       animation: 'vertical', 
       sw: 20, //slice width 
       sh: 20, //slice height 
       images: 1   
      } 

      var settings = $.extend(defaults, settings); 

      return $(this).each(function(){ 

       var opt = settings, 
        cont = $(this), 
        width = cont.innerWidth(), 
        height = cont.innerHeight(), 
        arr = [], 
        hc = Math.ceil(width/opt.sw), //horizontal slices count 
        vc = Math.ceil(height/opt.sh); //vertical slices count 


       if(opt.animation === 'vertical'){ 
        var loaded = false; 
        cont.empty(); 
        for(v = 0; v < vc; v++){ 
         for(h = 0; h < hc; h++){ 
          if(v == 1) cont.append('<div class="bar" id="bar' + h + '"></div>'); 
          var slices = { 
           src: '<img class="square" id="slice' + h.toString() + v.toString() + '" src="shred/squares/img1' + v.toString() + h.toString() + '.jpg"/>', 
           x: h * opt.sw, //offset left 
           y: v * opt.sh, //offset top 
           id: h.toString() + v.toString() 
          } 
          arr.push(slices); 
         } 

        } 


        $.each(arr, function(index, value){ 
         for(d = 0; d < hc; d++){ 
          if(arr[index].x == d * opt.sw){ 
           cont.find('#bar' + d).append(arr[index].src); 
           cont.find('#slice' + arr[index].id).css({'top': arr[index].y, 'left': 0}); 
          } 
          loaded = (d == hc -1) ? true : false; 
         } 
        }); 

        if(loaded){ 
         $('.bar').css({'width': opt.sw, 'height': vc * opt.sh, 'overflow': 'hidden', 'top': 0, 'left': width + opt.sh}); 

         function slidein(h, del){setTimeout(function(){ 
          cont.find('#bar' + h).stop().animate({ 
          'left': h * opt.sw, 
          'opacity': 1}, opt.speed*10)}, del + 2000); 
         } 

         function slideout(h, del){setTimeout(function(){ 
          cont.find('div#bar' + h).stop().animate({ 
           'width': 0, 
           'opacity': 0}, opt.speed*6)}, 10000 - h * 100); 
         } 

         for(h = 0; h < hc; h++){ 
          var del = h * opt.speed; 
          slidein(h, del); 
          slideout(h, del); 
         } 
        } 

       } 

      }); 
     } 
    }) 
})(jQuery); 

Answer 1

貌似loaded外的每個循環中不會被調用。我可以讓它在Chrome中工作，如果我修改這樣的代碼：

$.each(arr, function(index, value){ 
    for(d = 0; d < hc; d++){ 
     if(arr[index].x == d * opt.sw){ 
      cont.find('#bar' + d).append(arr[index].src); 
      cont.find('#slice' + arr[index].id).css({'top': arr[index].y, 'left': 0}); 
     } 
     loaded = (d == hc -1) ? true : false; 

     if(loaded){ 
      $('.bar').css({'width': opt.sw, 'height': vc * opt.sh, 'overflow': 'hidden', 'top': 0, 'left': width + opt.sh}); 

      function slidein(h, del){setTimeout(function(){ 
       cont.find('#bar' + h).stop().animate({ 
       'left': h * opt.sw, 
       'opacity': 1}, opt.speed*10)}, del + 2000); 
      } 

      function slideout(h, del){setTimeout(function(){ 
       cont.find('div#bar' + h).stop().animate({ 
        'width': 0, 
        'opacity': 0}, opt.speed*6)}, 10000 - h * 100); 
      } 

      for(h = 0; h < hc; h++){ 
       var del = h * opt.speed; 
       slidein(h, del); 
       slideout(h, del); 
      } 
     } 
    } 
});