CODEWITHSUNDEEP
jquerycssjquery-animatefadein
Kevin Banas
Kevin Banas

Reputation: 321

Jquery fadeIn + toggleclass(hide)

The effect I want is that (1) "abc" div isn't showing intially, (2) it fades in slowly on page load, (3) there is a button on the page that onclick toggles a "hide" class on the "abc" div, so that I can hide/show it.

The way I'm trying to achieve these things is: (1) setting "abc" div to display: none; initially in my CSS (2) using jquery fadeIn property (3) have a button that toggles it

I know my button works for hide/show, before I put any jquery for the fadeIn in there. I know the fadeIn works, because I can see it fade in BUT something about these both together means that the button to hide/show doesn't work on the element when it's fading in like this, even though it worked before I ever set display: none; on it and tried the jquery.

Help please!

I tried to make a jsfiddle but it's not working entirely. But you can see the basics of the code I'm using: http://jsfiddle.net/3bSB2/4/

Here's part of it (this code is required so that I can include the jsfiddle:

$(window).on("load", function() {
  $(".abc").fadeIn(525);
});

Upvotes: 0

Views: 245

Answers (1)

Reigel Gallarde
Reigel Gallarde

Reputation: 65284

it's because .fadeIn() uses inline css.

to fixed your problem, add !important to your display:none like this

.hide {
    display: none!important;
}

demo

or if you are just showing/hiding, with no additional css styles, you can just use .toggle() instead of .toggleClass() like this

$(".abc").toggle();

demo

Upvotes: 1

Related Questions