javascript - 淡出与运动相结合

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。