jquery - 从左到右更改jquery幻灯片菜单的方向

我仅在单击“主菜单链接”时才想从左到右更改幻灯片的方向。我喜欢单击其他链接时的方向。我只想更改“主菜单链接”的方向。

http://jsfiddle.net/L7v0w96s/10/

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.animate({
                left: $this.innerWidth()
            }, 500, function() {
                $this.removeClass('active')
            });
        });

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

});

最佳答案

Updated Fiddle

关键更改：

的HTML

<a href="#target0" class="panel main">

的CSS

div.panel {
    box-sizing: border-box; /* prevents the boxes from being too big because of padding */
    position: absolute;
    height: 200px;
    display: none;
    padding: 20px;
    width: 100%;
}

Javascript-根据所单击的链接计算动画的不同开始和结束位置。

isMain = $(this).is(".main"),
myStart = isMain ? 0 : $target.outerWidth() * -1,
myEnd = isMain ? $target.outerWidth() * -1: 0
otherEnd = isMain ?
   $other.filter(".active").outerWidth() * -1 :
   $other.filter(".active").outerWidth();

在动画逻辑中使用计算出的值

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

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

关于jquery - 从左到右更改jquery幻灯片菜单的方向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30251409/