slide right from left with jquery

Question

I'm using this fiddle for a my project but I want to make targets slide from right to left. If you check the link link you can see the targets divs are sliding form left to right.

jQuery(function ($) {
    $('a.panel').click(function () {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function (index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});

http://jsfiddle.net/sg3s/rs2QK/ here is a demo.

Please help I really appreciate it.

Answer 1

The only quick and dirty option I found was to play with zIndex and reposition non-active elements with right when animation completes.

jQuery(function($) {

    $('a.panel').click(function(e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.panel');

        if (!$target.hasClass('active')) {

            $other.css({zIndex: 1});
            $target.addClass('active').show().css({
                right: -$target.width(),
                zIndex: 2
            }).animate({
                right: 0
            }, 500, function() {
                $other.removeClass('active').css({
                    right: -$other.first().width()
                });
            });
        }
    }); 
});

Another way to filter siblings is:

var href = $(this).attr('href');
var idStr = href.replace(/[#\d]+/g, ''); // = 'target'
var $other = $target.siblings("[id^='" + idStr + "']"); // siblings with id that starts with 'target'

-Updated fiddle-