jquery幻燈片div更改css margin-left

Question

我知道，有這樣的優雅問題，但其中大多數太複雜，並與代碼重載。

我想在div的變化邊界之間滑動。它可以正常滑動，但不會左右滑動。我對這兩種情況都有完全相同的代碼，但我錯過了一些東西，無法弄清楚什麼。

$('#next').click(function(){ 
     var current = $('.selected'); 
     var next = current.next(); 
     if (next.length !=0) { 

      width = current.width() + 'px'; 
      next.show().css({'margin-left': width}); 
      current.animate({'margin-left': -width}, 900, function(){ 
       current.hide().removeClass('selected'); 
      }); 
      next.animate({'margin-left': 0}, 900, function(){ 
       $(this).addClass('selected'); 
      }); 
     } 
    }) 

jsFiddle

可以在小提琴看到 - 當你點擊下一步，NEX DIV幻燈片中，因爲它的預期。但是，如果您單擊prev - 它不會滑動。 （

Answer 1

當你改變邊界時，你正在切換哪邊是推/拉，你真的只想處理同一邊，但是相反的值，所以不要在css方法中使用margin-right和動畫的方法，有它使用相同的margin-left，但使這些值相對其他點擊方法。

$('#prev').click(function(){ 
    var current = $('.selected'); 
    var next = current.prev(); 
    if (next.length !=0) { 

     width = current.width() + 'px'; 
     next.show().css({'margin-left': -width}); 
     current.animate({'margin-left': width}, 900, function(){ 
      current.hide().removeClass('selected'); 
     }); 
     next.animate({'margin-left': 0}, 900, function(){ 
      $(this).addClass('selected'); 
     }); 
    } 

}) 

Working Fiddle