jquery動畫與nextAll

Question

我試圖創建一個可擴展和可收縮的麪包屑類型系統。

每個div都是在不同的點上動態創建的，並且可能包含有點冗長的數據。它可能有多達15個div，因此每個div在屏幕上浮動都會擴展到屏幕之外。正因爲如此，當它們被創建時，我會通過增加-700像素（-1400像素，-2100像素等）來爲每一個動畫。

.animate({left: '-700px'}); 

當它們被創建時，它們按預期堆疊起來。我的意圖是讓鼠標在懸停時向右滑動，並在鼠標離開時返回到起始位置。

問題是divs不會返回到它們最初「改變」的位置。它們只是作爲普通的浮標而不是摺疊的位置疊加起來。

有沒有人有處理這個問題的最佳方法的任何提示？

$(document).on({ 
    mouseenter: function() { 
     $(this).nextAll(".selected").animate({ 
      left: '100px' 
     }); 

    }, 
    mouseleave: function() { 
     $(this).nextAll(".selected").animate({ 
      left: '0px' 
     }); 
    } 
}, ".selected"); 

下面我有斷碼的小提琴例子：

https://jsfiddle.net/9ke06pfz/

Answer 1

你想使用jQuery的+=和-=從他們的當前值加減數值。而不是設置的值，所以直接執行以下操作來添加和從當前值刪除值：

$(document).on({ 
    mouseenter: function() { 
     $(this).nextAll(".selected").animate({ 
      left: '+=100' 
     }); 
    }, 
    mouseleave: function() { 
     $(this).nextAll(".selected").animate({ 
      left: '-=100' 
     }); 
    } 
}, ".selected"); 

小提琴：https://jsfiddle.net/9ke06pfz/1/

的+=和-=是這裏的關鍵。他們獲取屬性當前值並從中加或減。