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中，我通过400Inms持续时间的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

也许这对你有用

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/

Answer 2

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

HORIZONTALLY STACKED：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);   
}

动画系列图像彼此独立地阻挡

2 个答案: