4

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 では自分の目で確かめてください。最初にブロックは遷移せずに左に移動し、次に遷移が開始されます。

4

1 に答える 1

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

ここで動作するデモを見つけることができます

于 2013-08-21T11:03:47.603 に答える