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/

的+=和-=是这里的关键。他们获取属性当前值并从中加或减。