jquery animate with nextAll

Question

我正在尝试创建一种可扩展和可收缩的面包屑类型系统。

每个div都是在不同的点动态创建的，可能包含有些冗长的数据。它可能有多达15个div，因此每个浮动屏幕的div都会扩展到屏幕之外。因此，当它们被创建时，我通过增加-700px（-1400px，-2100px等）为每个动画制作动画。

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

创建它们时，它们按预期堆叠。我的目的是让nextAll divs在悬停时向右滑动，并在鼠标离开时返回到它们的起始位置。

问题在于div不会回到最初“改变”的位置。它们只是叠加为普通浮动而不是折叠位置。

有没有人有关于处理此问题的最佳方法的任何提示？

$(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 npm run tsc:w main.ts和+=来添加和减去当前值中的值。因此，不要直接设置值，而是执行以下操作来添加和删除当前值中的值：

-=

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

$(document).on({ mouseenter: function() { $(this).nextAll(".selected").animate({ left: '+=100' }); }, mouseleave: function() { $(this).nextAll(".selected").animate({ left: '-=100' }); } }, ".selected"); 和+=是关键所在。它们获取属性当前值并加上或减去它。