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

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

});

Answer 1

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幻灯片菜单的方向

1 个答案: