Geek asks and answers

Replace Array to Replace DIV Class

I have a landing page with a full page banner and a central enter button. My problem is to keep the button visible. I need to change its class from .darkto .lightdepending on whether the background is dark or light.

I studied the DIV change within the set time that matches my slider and create an array matching the color of the background image so that the button changes color to match my array. I also want the transition from changing each DIV to “if possible” to be a transition.

I know that I have the risk of duplicating the message here, but I want to emphasize that this question is unique to, and I can not find the answers elsewhere.

There seem to be many solutions for cycling DIVs, but I need to find one that suits my problem.

Ok, so from what I read, I tried this with jQuery:

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

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

   },
   10000
);
  });

I don’t know how to move this to an array or add a transition, And .. I believe that this can just replace with a separate DIV, and not just replace the class in my DIV.

I also looked at this:

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

However, this does not seem to work, and I'm not sure how to fix it? Can someone offer me a hand to solve this puzzle that I have.

EDIT:

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

I simplified the code to avoid confusion. The tag I would like to change is "btn-dark".

+3
source share
3 answers

You can use an array to replace classes as follows:

$(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).

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

+1

DEMO

, setInterval().

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

. , toggleClass

, ,

+3

Both examples use the same tag:

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

Without Fading: http://jsfiddle.net/wared/G68ww/ . The array is mapdesigned to facilitate maintenance if you need to change class names later.

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

Including attenuation using the jQuery Color plugin : http://jsfiddle.net/wared/Npj5e/ . Please note that it is lightgraynot supported (replaced by rgb(211, 211, 211)for demonstration).

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);
+1
source

More articles:


All Articles