Change CSS class after interval with JQuery

Question

I have a div with content and I want to change a class name to make the div visible. I have an interval and when expired it should change to display: yes and it should appear, but it is not working. If I set to disappear after 4 second the script runs correctly, but when I want it to appear it fails.

var $post = $(".hide");
setInterval(function() {
  $post.toggleClass("show");
}, 4000);

.show {
  display: yes;
  visibility: visible;
}

.hide {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">
  text
</div>

https://jsfiddle.net/istvan1026/g1cvttnd/1/

Relevant code belongs directly into your question, not only on external sites. Please edit your question accordingly. — C3roe
– C3roe, Commented Jun 20, 2017 at 13:06

Daniel Beck · Accepted Answer · 2017-06-20 13:47:56Z

2

You've got a lot of answers here that rewrite your code to make it work, but not much explanation of why your code didn't work.

First the easy part: display: yes isn't a thing; allowed values for display include block, inline, and none. (As well as a couple dozen other values, but not "yes".)

Correcting that "show" class to use display: block instead of display: yes doesn't solve the problem on its own, though: your div has the class "hide", and you're toggling the class "show" on and off (without removing the "hide" class.) Therefore the two toggle states are "hide" or "show hide" (both classes together).

And because the "hide" class is after the "show" class in the CSS, it takes precedence, so when both classes are on the same element the "hide" class wins.

There are several different ways to solve this: you could not use the "show" class at all, and just toggle the "hide" class on and off. Or you could toggle both classes simultaneously:

$post.toggleClass("show hide");
// Or use $post.toggleClass("show").toggleClass("hide");  same thing

Since the initial state of the div is "hide" (by itself), toggling both show and hide classes together would mean the next state would be "show" (by itself), then back to "hide" (by itself.)

A couple of other minor points:

As mentioned in @rbester's answer, it might be safer to use an explicit identifier on the div, instead of capturing it using the same classname you'll later be toggling on and off. It works okay in your code because you're capturing the div in the variable $post, but it'd be easy to later on accidentally try to refer to it as $('.hide') inside the setInterval loop, which wouldn't always match the element you want.
It's not necessary to set both display:none and visibility:hidden to hide the element. Either one on its own will hide the element (though not exactly the same way. Setting visibility:hidden will hide the element but still leaves space for it in the layout. display:none removes it from the layout completely. In most situations display:none is what you want.)

edited Jun 20, 2017 at 13:47

answered Jun 20, 2017 at 12:49

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

disinfor Over a year ago

Don't forget inline-block :)

Daniel Beck Over a year ago

That's why I said 'include' :) I'll clarify the answer though, thanks

Okx · Accepted Answer · 2017-06-20 11:48:53Z

0

If you don't use toggleClass, it should be fine:

var post = $("#text");
setInterval(function(){
    post.removeClass("hide");
    post.addClass("show");
}, 2000);

.show {
    display: inline;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" class="hide">
 text
</div>

answered Jun 20, 2017 at 11:48

Okx

3633 silver badges23 bronze badges

Comments

laurent · Accepted Answer · 2017-06-20 11:49:54Z

0

You also need to toggle the hide class, as in:

var $post = $(".hide");
setInterval(function(){
    $post.toggleClass("show");
    $post.toggleClass("hide");
}, 1000);

answered Jun 20, 2017 at 11:49

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Comments

rbester · Accepted Answer · 2017-06-20 12:09:23Z

0

First, the display property cannot have 'yes'. It can be 'block', 'inline', 'none' etc.

Second, using the identifier $(".hide") is a problem, since that's the class you are toggling.

You do not need a .show class. Simply use:

html:

<div class="myDiv hide">
    text
</div>

js:

setInterval(function() {
    $(".myDiv").toggleClass("hide");
}, 4000);

answered Jun 20, 2017 at 12:09

rbester

111 bronze badge

1 Comment

Daniel Beck Over a year ago

Using $('.hide') as the identifier works in his code, because he's capturing it in the variable $post instead of referring to it by classname inside the setinterval. You're right that it's potentially confusing, though, an explicit identifier would be safer.

Hema Nandagopal · Accepted Answer · 2017-06-20 12:29:59Z

0

var hello = $(".hide");
setInterval(function(){ 
    hello.removeClass("hide").addClass("show");
}, 4000);

.show{
    
    visibility: visible;
}


.hide{
 
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="hide">
 text
</div>

Hope,this solves your problem.

answered Jun 20, 2017 at 12:29

Hema Nandagopal

67813 silver badges40 bronze badges

2 Comments

Karim Cossutti Over a year ago

To make you better understand what you did wrong yes is not a legal value for the display a correct value would be block, inline or inline-block.

disinfor Over a year ago

@KarimCossutti Your comment belongs on the original question, not this answer.

user1960808 · Accepted Answer · 2017-06-20 12:33:47Z

0

Try this

var $post = $(".hide");

setInterval(function(){
     $post.toggleClass('hide');
}, 4000);

Css

.hide{
    display: none;
    visibility: hidden;
}

edited Jun 20, 2017 at 12:33

answered Jun 20, 2017 at 12:26

user1960808

1124 bronze badges

Comments

Raj · Accepted Answer · 2017-06-20 12:37:49Z

0

You can do this easily using setInterval.

If you want to toggle, that is, appear and disappear the div alternately then use

$("div").toggleClass("hide");

If you only want to make it appear then use

$("div").removeClass("hide");

js:

setInterval(function(){
    //to toggle
    $("div").toggleClass("hide");

    //to only make it appear
    $("div").removeClass("hide");
}, 4000);

html:

<div class="hide">text</div>

css:

.hide{
    visibility: hidden;
}

Here's an example

setInterval(function(){
    $("div").toggleClass("hide");
}, 4000);

.hide{
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">
 text
</div>

answered Jun 20, 2017 at 12:37

Raj

2,0343 gold badges32 silver badges57 bronze badges

Comments

rbester · Accepted Answer · 2017-06-21 09:57:10Z

0

One more option for you to explore is the option of using jQuery's built in functions such as .hide(), .show() and .toggle()

http://api.jquery.com/category/effects/basics/

answered Jun 21, 2017 at 9:57

rbester

111 bronze badge

Collectives™ on Stack Overflow

Change CSS class after interval with JQuery

8 Answers 8

2 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related