user3856196 user3856196 - 2 months ago 12
jQuery Question

remove one class when animating

I try to animate menu-panel. It should slide to the left. But it doesn't work right. And I can't understand why.

Answer

There are a few issues with the current code (e.g. you were missing a . on one panel selector and not referencing panel1 after changing the panel class. I also switched to absolute positioning with the arrow inside the panel.

I did a little cleanup to make the changes obvious (you should not repeat jQuery selectors - use temp vars instead):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/2x3uT/8/

$(function () {
    $('.slider-arrow').click(function () {
        var $this = $(this);
        var $panel = $(".panel, .panel1");
        var left = -53;
        var text = '»';
        if ($this.hasClass('hide')) {
            text = '«';
            left = 0;
        }
        $panel.animate({
            left: left
        }, 700, function () {
            // Animation complete.
            $this.html(text).toggleClass('hide').toggleClass('show');
            $panel.toggleClass('panel').toggleClass('panel1');
        });
    });

});

You can tweak the position numbers to make it match what you wanted.