动画系列图像块彼此独立

Question

我对 HTML/JavaScript 编程比较陌生，但过去在 Objective C 中做过一些

简化方案：

<div id="inline-blocked-images">
<img id="one" style="display:none" width="100px" height="100px" />
<img id="two" style="display:none" width="100px" height="100px" />
<img id="three" style="display:none" width="100px" height="100px" />
</div>

最初所有图像都被隐藏。现在我想用动画从左到右一张一张地展示它们。在 jQuery 中，我通过 400 毫秒持续时间的 setInterval 为每个图像执行下面的操作 ..所以它会像下面这样有效地进行

$('#one').show();
$('#one').animate( { 'width':50, 'height':50}, {duration:200});

问题是在第一张图像之后，每个后续图像都会导致先前图像的垂直移动。这是所有图像的最终尺寸是 50 x 50 像素，当它旁边有一个新的 100 x 100 像素图像通过动画缩小到 50 x 50 所有之前的 50 x 50 向下移动然后再次向上移动以与新的 50 x 50 人对齐在他们的右边。

应该做些什么来确保动画只影响新图像而不是之前的所有图像？这些事情是如何在 HTML/js 领域实现的？

Answer 1

垂直堆叠：http://jsfiddle.net/ccarterc1984/v69wd/1/

水平堆叠：http://jsfiddle.net/ccarterc1984/v69wd/2/

使用容器避免反向属性处理：http://jsfiddle.net/ccarterc1984/v69wd/3/

我将 img 更改为 div，因为我手边没有任何图像。这一次触发一个，它添加了 margin-top 和高度降低，以获得我认为你正在寻找的效果。

HTML：

<div id="inline-blocked-images">
    <div id="one" class="box"></div>
    <div id="two" class="box"></div>
    <div id="three" class="box"></div>
</div>

CSS：

#one, #two, #three{
    background-color: blue;
    position:relative;
    display:none;
    width:100px;
    height:100px;
}

jQuery:

$('.box').each(function(boxIndex){
    var box = $(this);
    setTimeout( function (boxIndex) {
        animateBox(box);
    }, boxIndex * 2000);   
});

function animateBox(box){
    box.show();
    box.animate( { 'width':50, 'height':50, 'margin-top':50}, 2000);   
}

Answer 2

也许这对你有用

function showImage(image)
{
    var el = (!image)? $('#inline-blocked-images img:first') : image;
    $(el).show();
    $(el).animate( { 'width':50, 'height':50}, {duration:200});
    nextImage = el.next();
    if(nextImage)
    {
        setTimeout(function(){ showImage(nextImage)}, 2000);
    }
}

 setTimeout(function(){ showImage()}, 1000);

将图片设置为float: left

请看这里http://fiddle.jshell.net/R4TaM/1/