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

JQuery - 带有Firefox的Buggy幻灯片

1 个答案: