2

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

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

到目前为止，我已经想出了这个（根据 jsFiddle）：

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

为不透明度设置动画效果很好，向左移动则不行。我怀疑这也可能是由于周围的 div 所致。但老实说，我对网络技术知之甚少，这就是我问你的原因。

  • 我该怎么做才能让我的矩形向左移动？
  • 我可以在“滑动”周围的 div 时将它们向左移动吗？
4

2 回答 2

5

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

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

要将其滑动到包装器 div 下，您所要做的就是给包装器元素一个 css 属性overflow:hidden。

于 2012-07-27T10:02:17.943 回答
2

可能是这样吗？

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

或者：

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

其作品

于 2012-07-27T10:16:01.927 回答