使用 jquery 从左向右滑动

Question

我正在将此 fiddle 用于我的项目，但我想让目标从右向左滑动。如果你检查 link link 你可以看到目标 div 从左到右滑动。

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-

使用 jquery 从左向右滑动

slide right from left with jquery

html

javascript

jquery

animation

slide