19

重複の可能性：
Jqueryがスクリプトの実行を遅らせる

ページの読み込み時に CSS サブクラスを 3 つの要素に割り当てる小さなスクリプトを作成しています。800ms後、そのサブクラスを削除したい。

私はこのコードがそれを行うかもしれないと思った:

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


        $("#rowone.one").addClass("pageLoad");
        $("#rowtwo.three").addClass("pageLoad");
        $("#rowthree.two").addClass("pageLoad");

        .delay(800);    
        $("#rowone.one").removeClass("pageLoad");
        $("#rowtwo.three").removeClass("pageLoad");
        $("#rowthree.two").removeClass("pageLoad");

})
</script>

残念ながらそうではありません。どんな助けでも大歓迎です。前もって感謝します。

4

5 に答える 5

52

関数を使用できsetTimeout()ます：

指定された遅延の後に関数を呼び出すか、コード スニペットを実行します。

$(document).ready(function () {
   var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");

   setTimeout(function() {
       $rows.removeClass("pageLoad");
   }, 800);
});
于 2012-08-05T10:40:39.570 に答える
16

これを試してみてください：また、チェーン式を使用した上記の誰も私が何かを逃した可能性がある理由がわかりません

.delay()アニメーションでのみ機能するように設計されています。実行していることに対して、通常のsetTimeoutsを使用する必要があります。

それがあなたのニーズに合うことを願っています:)

コード

 $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");

 setTimeout(function () {      
         $("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad");         
}, 800);
于 2012-08-05T10:48:24.713 に答える
2

これに使用setTimeoutします。

setTimeout(function() {
 $("#rowone.one").removeClass("pageLoad");
 $("#rowtwo.three").removeClass("pageLoad");
 $("#rowthree.two").removeClass("pageLoad");
}, 800);
于 2012-08-05T10:41:22.327 に答える
1

次のように、関数でラップして状態を渡します。

$(document).ready(function () {
    doClasses('add');
    setTimeout(function() { doClasses('remove'); }, 800)

    function doClasses(state) {
        $("#rowone.one, #rowtwo.three, #rowthree.two")[state+'Class']("pageLoad");
    }
});

フィドル

これで、呼び出しとタイムアウトの設定が簡単になり、コードを繰り返す必要がなくなりました。

于 2012-08-05T10:51:09.277 に答える
0

.one .three . twoクラス セレクターを削除し、タイムアウト機能を追加しました。動作するはずです。

<head>
<style type="text/css">
.pageLoad{color:red;}
</style>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>



<body>
<div id="rowone">rowone</div>
<div id="rowtwo">rowtwo</div>
<div id="rowthree">rowthree</div>



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


        $("#rowone").addClass("pageLoad");
        $("#rowtwo").addClass("pageLoad");
        $("#rowthree").addClass("pageLoad");




})

 function removeC(){
$("#rowone").removeClass("pageLoad");
        $("#rowtwo").removeClass("pageLoad");
        $("#rowthree").removeClass("pageLoad");
}

setInterval(removeC, 5000);


</script>
</body>

于 2012-08-05T11:00:44.540 に答える