jQueryを数秒間停止し、別のアニメーションを再生する

Question

jQueryを数秒間停止し、別のアニメーションを再生する

私はjQueryの新機能です。この小さなコードを実行するにはいくつかの助けが必要です。

<script type="text/javascript">
$(document).ready(function() {


   $('.cartoonsmart_right').animate({top: "-50"},500)(stop for few second and play another .animte).animate({top: "-400"},500, function() {$('.head_monkey1').removeClass("none")  .animate({left:"120"});});

 } );
 </script>

2

追加された 06 2月 2012 〜で 01:57 著者 moreinet 編集された 06 2月 2012 〜で 02:01

ビュー: 5

源

ru fr es pt de ar

私は前に試してみるが、うまくいかない

追加された 06 2月 2012 〜で 02:05, 著者 moreinet, 源

追加された 07 2月 2012 〜で 03:06, 著者 moreinet, 源

3 答え

著者 dknaack · Answer 1 · 2012-02-06T02:02Z

説明

jQueryの .delay（）メソッドを使用できます。

jQuery.delay（）キュー内の後続項目の実行を遅らせるタイマーを設定します。

サンプル

$('.cartoonsmart_right').animate({top: "-50"},500).delay(2000).animate(...)

詳しくは

jquery.delay（）

著者 Grim... · Answer 2 · 2012-02-06T02:04Z

.delay（）を使用するか、関数コールバックチェーンを使用することができます。

$(".cartoonsmart_right").animate({top: "-50"}, 500, function() {
   $(".other_element").animate({ ... }, 1000, function() {
       $(".yet_another_element").animate({ ... }, 750, function() {
          ...
       });
   })
});

新しい関数は、古い関数が終了すると呼び出されます。

著者 papaiatis · Answer 3 · 2012-02-06T02:35Z

Use jQuery delay(). Documentation: http://api.jquery.com/delay/

$(document).ready(function() {
    $('.cartoonsmart_right')
    .animate({top:"-50"}, 500)
    .delay(1000)
    .animate({top: "-400"}, 500, function() {
        $('.head_monkey1').removeClass("none").animate({left:"120"});
    });
});

絶対位置の値で要素を移動するので、次のCSSプロパティを設定する必要があります。

position: absolute;

それがなければうまくいかないでしょう！

フルデモ：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.cartoonsmart_right')
    .animate({top:"-50"}, 500)
    .delay(1000)
    .animate({top: "200"}, 500, function() {
            $('.head_monkey1').removeClass("none").animate({left:"120"});
    });
}); 
</script>
</head>
<body>
CartoonSmart
Headmonkey
</body>
</html>