слайд справа слева с jQuery

Question

Я использую эту скрипку для своего проекта, но хочу, чтобы цели скользили справа налево. Если вы проверите ссылку на ссылку, вы увидите цели, которые разворачиваются влево-вправо.

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/ вот демонстрация.

Пожалуйста, помогите, я действительно ценю это.

Answer 1

Единственная быстрая и грязная опция, которую я нашел, - это играть с zIndex и переставлять неактивные элементы с right, когда анимация завершается.

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

Другой способ фильтрации братьев и сестер является:

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-