フェイドインしながら移動させたい
下記の様にスクリプトを書いているのですが、
-------------------
<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++;
}
-------------------
フェイドインした後に上に移動してしまいます。
フェイドインしながら移動させるにはどのように書けば良いのでしょうか。
ご教授頂けると非常に助かります。
お礼
ありがとうございます。