淡出与运动相结合

Question

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

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

到目前为止,我已经想出了这个(根据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.