Question

我找到的这个例子正是我所寻找的： http://jsfiddle.net/sg3s/RZpbK/
请求作者sg3s

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    right: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            };

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

});

但是我遇到了一点问题。我希望面板从右边“打开”和“关闭”。我不熟悉javascript，我无法正确调整它。

任何人都可以帮我吗？

Answer 1

喜欢这个吗？

http://jsfiddle.net/RZpbK/845/

我所做的就是将animIn修改为：

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

Answer 2

只需将left: -($target.width())替换为两个地方的left: $target.width()

Answer 3

根据您以前的评论，这更符合您的要求吗？

http://jsfiddle.net/RZpbK/847/

刚刚更改了它，所以animIn立即执行，而不是在淡出完成后作为回调。

$this.removeClass('active').animate({
                left: -$this.width()
            }, 500);
            animIn();

使用JavaScript滑动面板

3 个答案: