Horizontal scroll von rechts nach links

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

ich diese Geige divs von links gleiten i right.What müssen, ist reverse.Slide von rechts nach links.

Answer 1

Sie müssen die Funktion umkehren, die die Animation bereitstellt. Statt

left: -($target.width()) 

habe ich die folgende

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

Hier ist meine runnable Lösung:

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

ich denke, es wird die Arbeit tun, wenn ich verstanden, was Sie möchten:

Hier wird die jsfiddle aktualisiert: http://jsfiddle.net/rs2QK/3891/

Und das Javascript aktualisiert: 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); 
    }); 
}); 

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({ 
 
     \t left: -($target.width())}) 
 
     .show() 
 
     .animate({ 
 
     \t 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>