Question

我希望这个问题不完全重复......但这些相关问题都没有帮助我解决我的问题。我想为无限的“流”矩形制作动画。每当用户点击我想要的元素时：

所有元素，包括新元素，慢慢向左移动，直到第二个矩形位于第一个矩形的位置
第一个淡出的矩形
最后淡入的新矩形

到目前为止，我已经提出了(According jsFiddle)：

    $('.block').first().animate({
        opacity: 0.75,
        left: '-=50'
    }, 300, function() {
        $('.block').first().remove();
        addBlock(index++);
    });

设置不透明度的动画效果很好，向左移动则不然。我怀疑这可能是因为周围的div。但说实话，我对网络技术并不了解，这就是我问你的原因。

如何让我的矩形向左移动？
我可以将它们向左移动，同时“滑动”周围的div吗？

Answer 1

只需将position:relative添加到您的css .block条目中，使用marginLeft即可获得所需效果 -

http://jsfiddle.net/BsEWp/67/

要在包装器div下滑动它，您需要做的就是为包装器元素提供一个css属性overflow:hidden。

Answer 2

可能是这样的吗？

$('.block').first().animate({
    opacity: 0.25,
    width: '-=50'
}

或：

$('.block').first().animate({
    opacity: 0.25,
    marginLeft: '-=50'
}

它的作品

淡出与运动相结合

2 个答案: