pHenomen pHenomen - 5 months ago 9
CSS Question

Fade in on switching classes in javascript

I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with

header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow);
but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.

Javascript:

$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});


CSS:

header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}


CODE PEN

Answer

try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:

if (scroll >= 50) {
    header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
    header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}
Comments