[WordPress] jQuery の画像フェージングと負荷に移動

スポンサーリンク

質問

スクリプトの助けを必要がそれを作る方法のか分からない。前に様々 なアニメーションのスクリプトを行ってきたこれは、それのようなどれも

だから、基本的に私は画像を (いくつかのテキスト) の束が表示されますのカタログを持っています。フェードイン左上からスライドインする画像をクリックして (200 と言う上部からピクセル左上右)。

ここで、.effect(‘transfer’) を使用できるかどうか分かりません。任意のアイデアですか?

編集: このコードをしたし、okaish は動作します。作品によってだけを移動できる方法を知りたいですか?言う 0.1 秒間隔あたり 1 つの .catalog のような

jQuery(document).ready(function($) {
$(".catalog").animate({
    marginLeft: '-=150px',
    marginTop: '-=150px'

            }, 0);
$(".catalog").animate({
    marginLeft: '+=150px',
    marginTop: '+=150px',
    opacity: '1'

            }, 800);


});

答え

これをチェック アウト、これはあなたの質問を答えることがありますだと思う

< hr/>

HTML

    <div class="container">
        <div class="catalogContainer clear"><img src="http://www.plancraft.co.uk/Opening%20Page%20186.jpg" class="catalog" /><br /><span>boat</span></div>
        <div class="catalogContainer clear"><img src="http://www.speedcrete.co.uk/images/bc230.jpg" class="catalog" /><span>hoe</span></div>
        <div class="catalogContainer clear"><img src="http://www.plancraft.co.uk/Opening%20Page%20186.jpg" class="catalog" /><span>boat</span></div>
    </div>

CSS

.container
{
    float: left;
    max-width: 80px;
}

.catalogContainer
{
    display: none;
    height: 90px;
    width: 80px;
}

.catalog
{
    height: 50px;
    width: 80px;
    float: left;
}

.clear
{
    clear: both;
}

をチェック アウト、 フィドル のデモのため

JQuery

$(".catalogContainer").each(function(i) 
{
    $(this).delay((i++) * 500).animate({
        marginLeft: '-=150px',
        marginTop: '-=150px'
    }, 10).fadeTo(1000, 1);
});

$(".catalogContainer").each(function(i) 
{
    $(this).delay((i++) * 500).animate({
        marginLeft: '+=150px',
        marginTop: '+=150px',
        opacity: '1'
    }, 800);
});

http://stackoverflow.com/questions/28051427/jquery-image-fading-and-moving-on-load

スポンサーリンク

Leave a Reply