$(document).ready(function() { $('.cartoonsmart_right').animate({top: "-50"},500)(stop for few second and play another .animte).animate({top:"> $(document).ready(function() { $('.cartoonsmart_right').animate({top: "-50"},500)(stop for few second and play another .animte).animate({top:"> $(document).ready(function() { $('.cartoonsmart_right').animate({top: "-50"},500)(stop for few second and play another .animte).animate({top:" />

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
私は前に試してみるが、うまくいかない
追加された 著者 moreinet,
<script type = "text/javascript" src = " </script> "rel =" nofollow noreferrer "> ajax.googleapis.com/ajax/libs/jquery/1.3.2/… ; *************************************************** **** <script type = "text/javascript" src = " </script> rel = "nofollow noreferrer"> ajax.googleapis.com/ajax/libs/jquery/1/… ; *************************************************** **********&zwnj; *****トップ1は動作しませんが、ボトムは動作していますなぜ私はなぜか分かりません
追加された 著者 moreinet,

3 答え

説明

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

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

サンプル

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

詳しくは

2
追加された
@moreinet助けてよかった! Stackoverflowは素晴らしいです。私の答えを受け入れることを考慮してください、しかし、私の答えが役に立つならば。
追加された 著者 dknaack,
ありがとう、私はこの場所が大好きです。
追加された 著者 moreinet,

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

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

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

1
追加された
緑のダニ;-)と恋に落ちてみてください
追加された 著者 Grim...,
ありがとう、私はこの場所が大好きです。
追加された 著者 moreinet,

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>
0
追加された
そんなにpapaiatisありがとう
追加された 著者 moreinet,