使用jquery每10秒切换一次div？

Question

我有两个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秒自动切换一次？

Answer 1

在代码中使用 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);

选中此Updated JSFiddle

Answer 2

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);
});

因此，他的一个彩色元素现在必须隐藏，另一个显示。

Answer 3

setInterval应该在这里工作。

考虑一下：

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

function yourfunction() { alert('test'); } //whatever you want it to do, test is purely for demonstration purposes

Answer 4

var b = true;

setInterval(function() {
   $( b ? '.dab' : '.pfs').trigger('click');
   b = ! b;
}, 10000);

Answer 5

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主体。

Answer 6

正如其他人所说，你可以使用setInterval。但为了实施，我建议：

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

$(document).ready(function(){
    setInterval(toggleAreas, 10000);
});

Answer 7

我看到你最终选择了一个答案，但我想我已经花了两分钱，因为我做了很长的解释。我希望这对你的理解有所帮助。

第一个示例有一个计时器变量，因此每次发生更改时都可以重置10秒。这样，单击具有类名的元素也会重置计时器。

  

旁注：在以下示例中，我使用.on()。如果您使用1.7之前的jQuery，则只需将.on()替换为.live()。

Example

var tmrShowHide;  //  this variable will act as out timer for keeping up with time changes
    //    if you don't want to reset the 10 seconds everytime there is a change, 
    //    then please see exmple 2
function divShowHide() {  //  this will be the method used to change the colors and reset the timer
    clearTimeout(tmrShowHide);    //    clears previous timer so 10 seconds is reset

    //  the .toggle method will simply toggle the visible state (display in css) of the element it's called upon
    //  so if we start with one hidden and one visible, then this is all that is needed to make the change!
    //  also note that i'm calling both elements at once, as they'll both undergo the "toggle" change
    $('#pf-blue-area, #pf-orange-area').toggle();

    tmrShowHide = setTimeout(divShowHide, 10000);    //    resets timer to 10 seconds
}

$(function() {  //  Same as $(document).ready(function() { // just shorter!
    //  the following establiches our click event on the 2 class types
    $(document).on('click', '.dab, .pfs', divShowHide);
    //  this will begin the timer and give us a variable that can be cleared as needed
    tmrShowHide = setTimeout(divShowHide, 10000);
})

所以没有评论就像它一样简单：

var tmrShowHide;
function divShowHide() {
    clearTimeout(tmrShowHide);
    $('#pf-blue-area, #pf-orange-area').toggle();
    tmrShowHide = setTimeout(divShowHide, 10000);
}

$(function() {
    $(document).on('click', '.dab, .pfs', divShowHide);
    tmrShowHide = setTimeout(divShowHide, 10000);
})

---

---

---

下一个示例要短得多，因为它不会重置计时器，因此，单击一个类元素进行更改不会阻止它每10秒更改一次。

Example 2

function divShowHide(e) {  //  this will be the method used to change the colors
    //  the .toggle method will simply toggle the visible state (display in css) of the element it's called upon
    //  so if we start with one hidden and one visible, then this is all that is needed to make the change!
    //  also note that i'm calling both elements at once, as they'll both undergo the "toggle" change
    $('#pf-blue-area, #pf-orange-area').toggle();
}

$(function() {  //  Same as $(document).ready(function() { // just shorter!
    //  the following establishes our click event on the 2 class types
    $(document).on('click', '.dab, .pfs', divShowHide);
    //  this will begin the unstoppable 10 second timer
    setInterval(divShowHide, 10000);
})

所以没有评论就像它一样简单：

function divShowHide(e) {  $('#pf-blue-area, #pf-orange-area').toggle();  }

$(function() {
    $(document).on('click', '.dab, .pfs', divShowHide);
    setInterval(divShowHide, 10000);
})

The Blinker! (_{just for fun})