水平滚动从右到左

Question

JSFiddle for horizontal slide of divs

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

我这个小提琴div从左向右滑动。我需要的是反向。从右到左滑动。

Answer 1

您需要撤消提供动画的功能。而不是

left: -($target.width())

我把以下

left: -($(this).width() - ($target.width()))

这是我的可运行解决方案：

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: 0
                }, 500);
            });

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

});

#left, #right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

Answer 2

如果我理解你想要的东西，我认为它会起作用：

以下是更新的jsfiddle：http://jsfiddle.net/rs2QK/3891/

并更新了javascript： jQuery（函数（$）{

$('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: -($target.width())
            }, 500);
        });
    }
  $target.addClass('active')
  .css({
    left: -($target.width())})
  .show()
  .animate({
    left: 0}, 500);
  });
});

＆＃13;

＆＃13;

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: -($target.width())
                }, 500);
            });
        }
      $target.addClass('active')
      .css({
      	left: -($target.width())})
      .show()
      .animate({
      	left: 0}, 500);
    });

});

＆＃13;

#left, #right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;