4

リンクをクリックすると青からオレンジに切り替わる2つのdivの設定があります。同じ場所に座って、ある色から別の色に交換したような印象を与えます. これは私のjqueryです：

jQuery(document).ready(function( $ ) {
    $(".dab").click(function(){
        $("#pf-orange-area").show();
        $("#pf-blue-area").hide();
    });
    $(".pfs").click(function(){
        $("#pf-orange-area").hide();
        $("#pf-blue-area").show();
    });
});

その機能を維持しながら、10 秒ごとに自動的に切り替えるにはどうすればよいですか?

4

7 に答える 7

3

コードで使用setInterval()します。このようなもの

jQuery(document).ready(function ($) {
    var toggle = function () {
        $("#pf-orange-area, #pf-blue-area").toggle();
    }
    var anim = setInterval(toggle, 1000);
    $('button').on('click', function () {
        clearInterval(anim);
    });
});

アニメーションを一時停止/停止するには

clearInterval(anim);

この更新された JSFiddle を確認してください

于 2013-09-05T12:08:31.060 に答える
3 
jQuery(function($) {

    var $or = $("#pf-orange-area"),
        $bl = $("#pf-blue-area"),
        changeColor;

    $(".dab").click(function(){
        $or.show();
        $bl.hide();
    });

    $(".pfs").click(function(){
        $or.hide();
        $bl.show();
    });

    changeColor = function() {
        $or.toggle();
        $bl.toggle();
    };

    setInterval(changeColor, 10000);
});

したがって、彼の色付き要素の 1 つが非表示になり、もう 1 つが表示されます。

于 2013-09-05T12:19:23.527 に答える
2

setInterval はここで機能するはずです。

検討：

window.setInterval(yourfunction, 10000); //10000 = 10 sec

function yourfunction() { alert('test'); } //whatever you want it to do, test is purely for demonstration purposes
于 2013-09-05T12:09:43.993 に答える
1 
var b = true;

setInterval(function() {
   $( b ? '.dab' : '.pfs').trigger('click');
   b = ! b;
}, 10000);
于 2013-09-05T12:10:50.463 に答える
0

他の人が言ったように、setInterval を使用できます。しかし、実装のために私はこれを提案します:

function toggleAreas() {
    $("#pf-blue-area, #pf-orange-area").toggle();
}

$(document).ready(function(){
    setInterval(toggleAreas, 10000);
});
于 2013-09-05T12:24:43.787 に答える
0 
var i = 0,
handle = setInterval(function(){


    if(i%2 === 0){ //every other time (0,2,4 etc)

        $("#pf-orange-area").show();
        $("#pf-blue-area").hide();

    }else{ // every 'odd' time (1,2,3)

        $("#pf-orange-area").hide();
        $("#pf-blue-area").show();

    }    

    i++; 
},10000);

//to stop it:
//clearInterval(handle);

初期の可視性の状態に応じて、if 本体と else 本体を切り替えたい場合があります。

于 2013-09-05T12:08:01.743 に答える