動畫系列圖像塊相互獨立

的我是比較新的HTML/JavaScript編程，但在過去動畫系列圖像塊相互獨立

簡化方案做了一些目標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的土地如何實現這樣的事情？

來源

2013-09-21 climbon

我想這[小提琴]（http://jsfiddle.net/hari_shanx/pVX2F/1 /），它工作正常。不知道我是否明確瞭解你的問題。 – Harry

不清楚你在找什麼...檢查這個：http://jsfiddle.net/U4ueK/1/ – Sergio

垂直堆疊：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); 
}

來源

2013-09-21 16:20:55 carter

謝謝。這種技術對我有用。基本上每個div /圖像放在它自己的固定尺寸的容器內。因此，當您在固定維度div內爲div/img設置動畫時，它會按預期工作。我結束了使用div的內容：url（../ myimage.png）。儘管如此，我不知道如何處理純img標籤。 – climbon

您的意思是這樣的？ http://jsfiddle.net/ccarterc1984/v69wd/4/ – carter

啊..我必須在當時犯錯。涼。謝謝卡特 – climbon

也許這會爲你工作

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/

來源

2013-09-21 16:18:56 Mina

你的小提琴確實顯示我正在尋找的效果，但我接受卡特的答案，因爲我可以使該代碼的工作我很容易。答案沒有錯，只是我的代碼最初只是改變了float：left並不適合我。 – climbon

動畫系列圖像塊相互獨立

回答

相關問題