CODEWITHSUNDEEP
jqueryfirefoxslide
DroX
DroX

Reputation: 41

JQuery - Buggy slide with firefox

I have an issue with jQuery toggle effect in FireFox.

Here is my code :

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

You can check the problem here.

With IE9 and Chrome, the animation of the cube is nice, but with Firefox, see for yourself. First the block goes left without transition, and then the transition starts.

Upvotes: 4

Views: 309

Answers (1)

Tomzan
Tomzan

Reputation: 2818

This can be solved by animating 'cube' yourself.

First you need to calculate the amount of pixels to travel:

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

Then animate 'cube':

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

You can find working demo here

Upvotes: 1

Related Questions