JQuery - 使用Firefox的Buggy幻燈片

Question

我在FireFox中遇到jQuery切換效果問題。

這裏是我的代碼：

$(document).ready(function() { 
    $(".cube").click(function(){ 
     $(".cube").toggle("slide", {easing:'easeInExpo', direction: 'left'}, 500, function(){ 
      $(".cube").toggle("slide", {easing:'easeOutExpo', direction: 'right'}, 500); 
     }); 
    }); 
}); 

你可以check the problem here。

使用IE9和Chrome，多維數據集的動畫效果不錯，但使用Firefox，請親自看看。首先塊沒有轉換就離開，然後轉換開始。

Answer 1

這可以通過自己動畫「立方體」來解決。

首先，你需要計算的像素數去旅行：

pixelToTravel = parseInt($cube.css('marginLeft')) + $cube.position().left + $cube.outerWidth(); 

然後動畫 '魔方'：

$cube.click(function(){ 
    $(this).animate({ right: pixelToTravel }, 500, 'easeInExpo', function(){ 
     $(this) 
      .css({ 'right': 'initial', 'left': pixelToTravel }) 
      .animate({ left: 0 }, 500, 'easeOutExpo', function() { 
       $(this).css('left', 'initial'); 
      }); 
    }); 
}); 

你可以找到工作演示 here