CODEWITHSUNDEEP
javascript
Vegapunk
Vegapunk

Reputation: 99

Javascript/jquery, why does my fadein/fadeout not work?

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.

I got it working with jquery color animation, but then i have to link another library which id like to avoid.

I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..

It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.

TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.

$(document).ready(function(){

  $(document).scroll(function(){

    if ($(this).scrollTop() > 200) {

      if ($("#topnav").hasClass('transparent')){

        $("#topnav").removeClass('transparent');

        $("#topnav").addClass('black').fadeIn(1000);

      }

    } else if ($(this).scrollTop() < 200) {

      if ($('#topnav').hasClass('black')){

        $('#topnav').removeClass('black');

        $('#topnav').addClass('transparent').fadeIn(1000);

      }

    }
  });
});

why doesnt this work?

Upvotes: 1

Views: 137

Answers (2)

kuns
kuns

Reputation: 44

Try out this simple example

In Your CSS file,

.transparent-background {
  background-color: transparent;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

.black-background {
  background-color: black;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

And in your js file just add class before that attach transparent-background class to topNav container

$(document).ready(function(){
  $(document).scroll(function(){
     if ($(this).scrollTop() > 200) {
         $("#topnav").removeClass("transparent-background").addClass('black-
                background')      
     } else {
        $("#topnav").removeClass("black-
                background").addClass('transparent-background')
     } 
 });
});

Upvotes: 0

Kokodoko
Kokodoko

Reputation: 28128

You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.

.box {
    background-color: black;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
}

And in Javascript you can set the color:

if ($(this).scrollTop() > 200) {
    $("#topnav").css({"background-color", "yellow"});
}

jsfiddle

Upvotes: 1

Related Questions