jquery - 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);
        });
    });
});

你可以在这里检查问题。

在 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');
            });
     });
});

你可以在这里找到工作演示