締切済み

フェイドインしながら移動させたい

2012/10/12 16:18

下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。フェイドインしながら移動させるにはどのように書けば良いのでしょうか。ご教授頂けると非常に助かります。

tenpraxxx
お礼率94% (18/19)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/10/13 13:09 回答No.3

２つにわけてみてはどうでしょうか。（jQueryは内部でクロージャーを作りますので、1つめの$('#box01')と2つめの$('#box01')が別々のタイマーで管理されると思います。） $('#box01').fadeIn(1000); $('#box01').animate({'marginTop': '-20px'});

質問者

お礼 2012/10/14 11:56

talooさんご回答有難う御座います。上記試してみたのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/ … <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000); $('#box01').animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000); $('#box02').animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000); $('#box03').animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- 同じく別々に動いてしまいます、、

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2012/10/13 01:30 回答No.2

jQuery がなくても、そのていどならできます。ぜんかくくうはくは、はんかくにね。（超蛇足つきです。） <!DOCTYPE html> <title></title> <style> ol > li { 　width : 50px; 　height: 50px; 　line-height:50px; 　text-align:center; 　background:green; 　border:2px #050 solid; 　opacity : 0; 　filter : 'alpha(opacity=0)'; 　list-style:none; 　position : absolute; } </style> <body> <ol> 　<li>a 　<li>b 　<li>c 　<li>d 　<li>e </ol> 　 <script> if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)}; (function () { 　var doc = document; //　var li = doc.querySelectorAll ('ol > li'); 　var li = doc.getElementsByTagName ('li'); 　var opacity = 0; 　var radius = 300; 　var step = 1/10; 　var n = 0; 　var deg = Math.PI/180; 　var grp = [ 　　[li[0], 300, 0], 　　[li[1], 300, 60, 20], 　　[li[2], 300, 120, 40], 　　[li[3], 300, 180, 60], 　　[li[4], 300, 240, 80] 　]; 　　(function LOOP () { 　　grp.forEach (function (a) { 　　　var s = a[0].style; 　　　var k = (a[3]||0)*deg; 　　　s.top = (a[1] - Math.cos (k)*radius*n|0) + 'px'; 　　　s.left = (a[2] + Math.sin (k)*radius*n|0) + 'px'; 　　　s.opacity = n; 　　　s.filter = 'alpha(opacity='+(n*100|0)+')'; 　　}); 　　if ((n += (1-n)*step+0.001) < 1) setTimeout (LOOP, 30); 　 }) (); }) (); </script> </body>

質問者