3

私は 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>

最初はすべての画像が非表示になっています。今、私はそれらを左から右に 1 つずつ表示したいと思いますが、アニメーションを使用します。jQueryでは、400msの期間の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 の世界では、そのようなことがどのように達成されるのでしょうか?

4

2 に答える 2

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/

于 2013-09-21T16:18:56.590 に答える
1

垂直に積み重ねられた: http://jsfiddle.net/ccarterc1984/v69wd/1/

水平スタック: http://jsfiddle.net/ccarterc1984/v69wd/2/

逆プロパティ処理を回避するためのコンテナを使用: http://jsfiddle.net/ccarterc1984/v69wd/3/

手元に画像がなかったので、img を div に変更しました。これは一度に 1 つずつ起動し、高さの減少と併せてマージントップを追加して、あなたが探していると思う効果を得ました。

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-21T16:20:55.600 に答える