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);
});
it's because .fadeIn() uses inline css.
to fixed your problem, add !important to your display:none
like this
.hide {
display: none!important;
}
or if you are just showing/hiding, with no additional css styles, you can just use .toggle() instead of .toggleClass() like this
$(".abc").toggle();