jqueryの.animate（）関数の間に画像を読み込む方法は？

Question

以下のように、.animate関数とsetInterval関数を使用してjqueryを構築しようとしています。

$(document).ready(function(){ 
$("#animate1").animate({'margin-left':'150px','margin-bottom':'50px'},2000) 
    },300); 
    }); 

このアニメーションは、画像を下から左に移動します。私は、このアニメーションの後に表示されないこのアニメーションの間にのみ画像を表示したい場合、どのようにそれを置くことができます.. ??フェードアウト、アニメーション、フェードイン：あなたは、単にこれらのアクションをチェーンすることができないのはなぜ

<div> <div id="animate1"><img src="img/chotu.png" style="height:200px; width:200px;"/> </div></div>

Answer 1

に従うように私のhtmlはありますか？ここで

は一例です：https://jsfiddle.net/45ky6pgw/3/

HTML：

<div id="outer"> 
    <div id="animate1"> 
    <img src="http://cliparts.co/cliparts/riL/xdz/riLxdzRoT.jpg"/> 
    </div> 
</div> 

はCSS：

#outer { 
    position: relative; 
    border: 2px solid green; 
    width: 300px; 
    height: 300px; 
} 
#animate1 { 
    position: absolute; 
    display: none; 
    bottom: 0; 
    left: 100px; 
    vertical-align: bottom; 
} 
#animate1 img { 
    width: 100px; 
    height: 100px; 
} 

JS：

$(document).ready(function() { 
    setTimeout(function(){ 
    $("#animate1") 
     .fadeIn('slow') 
     .animate({'margin-left':'50px','margin-bottom':'50px'},2000) 
     .fadeOut('slow'); 
    }, 2000) 
}); 

あなたがの "連鎖" を参照してくださいすることができます3つのmeth ods fadeIn(),animate()および​​がJSコードに含まれています。

Answer 2

私はこれを探しています... !!

$(document).ready(function(){ 
    setInterval(function(){ 
    $("#animate1").fadeIn('slow').animate({'margin-left':'150px','margin-bottom':'50px'},2000).fadeOut(); 
    $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},2000).fadeOut(); 
    },300); 
    }); 

とfisrt .fadeOut（）関数の後に私は背景画像の不透明度を変更したい.. !!

Answer 3

バックグラウンドのdivクラスまたはdiv IDが同じである必要があります。そうしないと、jquery chainingで行うことはできません。しかし、jquery chainingはアニメーションを1つずつ再生します。ですから、あなたはCSS変換やアニメーションでもそれを行うことができます。