4

我有两个 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);
});

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

于 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 
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 回答
0

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

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

$(document).ready(function(){
    setInterval(toggleAreas, 10000);
});
于 2013-09-05T12:24:43.787 回答
0

我看到你终于选择了一个答案，但我想我会投入两分钱，因为我做了这个例子并做了很长的解释。我希望这对您的理解有所帮助。

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

旁注：在以下示例中，我使用.on()。如果您使用的是 1.7 之前的 jQuery，您可以简单地将.on()替换为.live()。

例子

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 秒更改一次。

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

闪光灯！（只是为了好玩）

于 2013-09-05T12:59:53.823 回答