jQuery: animate opacity to 0 then fadeOut

Question

I have a function set up that animates the opacity of an element to 0 as you scroll, what I want though is after this function as finished (the opacity is at 0), then the element fades out (ie you never see it again). The function is a bit buggy though and is fading out too early, I have a jsFiddle: http://jsfiddle.net/6hcm4qg4/

My markup is as follows:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var height = $(window).height();



  var myEvent = function() {
    $('.logo_container, .slogan').css({
      'opacity': ((height - scrollTop) / height)
    });
  };
  $.when(myEvent()).done(function() {
    $('.logo_container, .slogan').fadeOut();
  });

});

Any suggestions would be greatly appreciated!

Answer 1

You can use jquery animate function to change opacity with animation. In animate function callback hide the element if opacity reaches to 0 like below.

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var height = $(window).height();

    $('.logo_container, .slogan').animate({
      'opacity': ((height - scrollTop) / height)
    }, function() {
       if (this.style.opacity <= 0)
           $(this).hide();
    });
});