jQuery：将不透明度设置为0，然后淡出动画

Question

我有一个函数设置，可以在滚动时将元素的不透明度设置为0，我想要的是在此函数完成后（不透明度为0），然后元素淡出（即您再也看不到它了） 。 该功能虽然有点bug，并且已经淡出，但是我有一个jsFiddle： http : //jsfiddle.net/6hcm4qg4/

我的标记如下：

$(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();
  });

});

任何建议将不胜感激！

Answer 1

您可以使用jquery animate功能更改动画的opacity 。 在动画函数回调中，如果不透明度达到0则隐藏元素，如下所示。

$(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();
    });
});