Question

我有一个带有整页横幅和输入按钮中心的登录页面。我的问题是，保持按钮的可见性。我需要将其类从.dark更改为.light，具体取决于背景是暗背景还是浅背景。

我已经研究过将DIV更改为与我的滑块匹配的设定时间，并制作一个与背景图像颜色相匹配的数组，这样按钮就会根据我的数组改变颜色。我还希望从更改每个DIV到“如果可能”的过渡是淡入淡出过渡。

我知道我在这里有重复帖子的风险，但我想强调这个问题是堆栈溢出所特有的，我无法在其他地方找到我的答案。

似乎有很多自行车DIV的解决方案，但我需要找到适合自己问题的解决方案。

好的，从我读过的内容中我已经尝试过jQuery：

$(window).load(function(){
 setTimeout(
  function(){

      $('#one').replaceWith($('#two'));
      $('#two').show();

   },
   10000
);
  });

我不知道如何将其移动到数组中或添加转换，AND ..我相信这可能只是替换为单独的DIV，而不是仅仅替换我的DIV中的类。

我也看过这个：

$(document).ready(function(){
    window.setTimeout(function(){
        $(".one").replaceClass(".two");
    },100);
});

然而，这似乎没有运作，我不确定如何解决？有人能帮我解决这个难题。

编辑：

<div class="door">
    <img src="img/logo-inv.png">
    <br>
    <a href="#" class="btn btn-dark">ENTER</a>
</div>

我简化了代码以避免混淆。我想改变的标签是“btn-dark”。

Answer 1

试试这个

DEMO

如果需要使用切换类进行循环，则应使用setInterval()。

码

$(document).ready(function () {
    setInterval(function () {
        $(".one").toggleClass("main");
    }, 1000);
});

注意：使用toggleClass

只能有两种可能性

希望这有帮助，谢谢

Answer 2

两个示例都使用相同的标记：

<a style="display:block;width:200px;height:200px;"></a>

不褪色：http://jsfiddle.net/wared/G68ww/。 map数组旨在简化维护，以防您以后需要更改类名。

var classes = ['dark', 'light'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').addClass(
    classes[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').removeClass(classes.join(' ')).addClass(
        classes[map[i++ % map.length]]
    );
}, 1000);

使用jQuery Color plugin http://jsfiddle.net/wared/Npj5e/包含淡出效果。请注意，lightgray不受支持（替换为演示的rgb(211, 211, 211)）。

var colors = ['gray', 'rgb(211, 211, 211)'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').css(
    'backgroundColor', colors[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').animate({
        backgroundColor: $.Color(
            colors[map[i++ % map.length]]
        )
    });
}, 1000);

Answer 3

您可以使用数组替换类：

$(document).ready(function () {
    var myClasses = ["light", "light", "dark", "light"];
    var count = 0;

    setInterval(function () {
        $(".one").removeClass("light dark").addClass(myClasses[count]);
        count >= 3 ? count = 0 : count += 1;
    }, 1000);

});

我使用setInterval()每1秒执行一次该功能（1000）。

<强> Demo

具有淡入淡出效果

我们只需添加以下CSS。

.one {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

<强> Demo

循环数组以替换DIV类

3 个答案:

DEMO

码