Question

我正在构建一个日历，其中一个要求是通过设置背景颜色CSS属性来突出显示某些日期。

但是，有时候某一天需要有两种不同的颜色：例如，假期发生发薪日时。

有没有办法在两种不同的背景颜色之间交替？我们正在使用jquery，而且我已经查看了循环插件，但这对于我需要的东西来说似乎完全有点过头了。

这将循环一次，但我希望它是连续的：

$(".toggleBG").animate({ backgroundColor: "#FFFF66" }, 2000, function() {
    $(".toggleBG").animate({ backgroundColor: "#99CCFF" }, 2000)
});

Answer 1

这应该有效：

var animate1, animate2;
var elem = $(".toggleBG");

animate1 = function() {
    elem.animate({ backgroundColor: "#FFFF66" }, 2000, animate2)
}
animate2 = function() {
    elem.animate({ backgroundColor: "#99CCFF" }, 2000, animate1)
}

animate1();

每个函数都使用另一个函数作为animate的回调。

停止动画的最简单方法是：

animate1 = animate2 = undefined

Answer 2

function toggleBg(){
    if($('.toggleBG').css('backgroundColor') == '#FFFF66'){
        $('.toggleBG').css('backgroundColor', '#99CCFF');
    }else{
        $('.toggleBG').css('backgroundColor', '#FFFF66');
    }
    setTimeout(toggleBg, 2000);
}
$(function(){
    toggleBg();
});

Answer 3

var changeColors = setInterval(function() { 
     $(".toggleBG").toggleClass('color2');
}, 2000);

然后，为每种背景颜色创建一个CSS规则：

div.color1 { 
     background-color: #FFFF66;
     -moz-transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}
div.color1.color2 { background-color: #99CCFF; }

过渡将使颜色变化平滑而不是“闪烁”，至少在支持它的较新浏览器中。

Answer 4

只有jquery UI库支持颜色交替，所以当你从http://www.jqueryui.com下载jQueryUI库并将脚本添加到你的网页时，它应该可以工作

Answer 5

也可能有其他方法可以做到这一点，但您可以使用超时功能来保持代码的运行：

function flip() {
    $(".toggleBG").animate( 
    { backgroundColor: "#FFFF66" }, 2000, function() {
    $(".toggleBG").animate({ backgroundColor: "#99CCFF" }, 2000) 
    });
    setTimeout( flip(), 1 );
}

如何在两种背景颜色之间切换？

5 个答案: