javascript - 4秒ごとにjqueryでクラスを追加および削除する方法

Question

何らかの理由で、これはpostのクラスを持つ要素に4秒ごとに新しいクラスを追加および削除するものではありません。これと同様に、jqueryは正しく読み込まれます。chromeはコードにエラーを表示しません。

$(document).ready(function(){
    $('.post').addClass('display').delay(4000).removeClass('display');
});

Answer 1

リストしたので、これを4秒ごとに実行したいので、単に使用できますsetInterval()

var $post = $(".post");
setInterval(function(){
    $post.toggleClass("display");
}, 4000);

$postセレクターは、各間隔で DOM が照会される必要がある回数を最小限に抑えるためにキャッシュされることに注意してください。

jsfiddle の例

Answer 2

4秒後にクラス名を切り替えたいと仮定します。

setTimeout(function(){
   $('.post').toggleClass('display');
},4000);

JSフィドルデモ。

4秒ごとに切り替えるため（@Markは、これを投稿に追加しているときにすでにsetIntervalオプションを投稿しています。...私はそれを残していますが、Markが最初にそれを取得したことを認めます）：

setInterval(function(){
   $('.post').toggleClass('display');
},4000);

JSフィドルデモ。

参照：

• setInterval。
• setTimeout。
• toggleClass()。

Answer 3

.delayaddClassまたはではなく、他のアニメーション メソッドでのみ機能しremoveClassます。これを試して：

$('.post').addClass('display');
setTimeout(function(){ $('.post').removeClass('display'); },4000);

追加と削除を続けたい場合は、より創造的になる必要があります。setInterval8000 ミリ秒の遅延を使用することもできますが、それでは最初の遅延も発生addClassします。もう 1 つのアプローチは、ネストされた setTimeouts と再帰関数呼び出しを使用することです (toggleClassコードを短縮するために)。

function addRemoveClass() {
    var delay = 4000; // milliseconds
    setTimeout(function() {
        $('.post').toggleClass('display');
        addRemoveClass();
    }, delay);
};
addRemoveClass();

http://jsfiddle.net/mblase75/jU8cj/

(1000 ミリ秒に設定.displayし、透明に設定すると、出来上がりです。タグを再発明しただけですblink。)

Answer 4

次のようなものが欲しいと思います：

$(document).ready(function(){  
  setInterval(addRemoveClass,4000); 
});

function addRemoveClass() {
   $('.post').toggleClass('display');
}

Answer 5

jQueryではdelayon queuedアクションのみを使用できます。幸いなことに、アイテムをキューに追加するのは比較的簡単です。

$(selector).delay(duration).queue(function (next) {
    $(this).doStuff();
    doOtherStuff();
    next();
});

関数に提供されるパラメーターは、を使用するなどの非同期アクションを実行する場合に、キューに続行するように指示する関数です$.ajax。

ループを取得するには、キューに入れられた関数を再度キューに入れます。

jQuery(function ($) {
    "use strict";
    function toggleDisplayClass(next) {
        $(this).toggleClass('display')  //toggles the class
            .delay(4000)                //waits 4 seconds
            .queue(toggleDisplayClass); //requeued
        next();                         //continues on the queue
    }
    $('.post').queue(toggleDisplayClass);
});

私の更新された fiddleでこれを実際に見ることができます。

Answer 6

そんな感じ ：

jQuery(document).ready(function($) {  // ready
        var refresh=function(){

        $('.post').toggleClass('display'); //switch

                 }//end refresh
    setInterval(refresh,4000);
});

Answer 7

.delay()関数ではなく、アニメーションのみを遅延させます。JavaScript のネイティブsetTimeoutメソッドを使用できます。

function toggleDisplay() {
    $('.post').toggleClass("display");
    setTimeout(function(){ toggleDisplay(); },'1000');
}
toggleDisplay();