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

【问题标题】：jQuery: animate opacity to 0 then fadeOutjQuery：将不透明度设置为 0，然后淡出
【发布时间】：2016-01-09 13:31:23
【问题描述】：

我设置了一个函数，可以在滚动时将元素的不透明度设置为 0，但我想要的是在此函数完成后（不透明度为 0），然后元素淡出（即你永远看不到再次）。该功能虽然有点错误，而且过早消失，我有一个 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();
  });

});

任何建议将不胜感激！

【问题讨论】：

函数fadeOut()已经做了同样的事情......为什么你需要将不透明度设置为0然后再次淡出？
我猜你做错了。 :( 不透明度必须设置为滚动和时间的函数。不对……
@PraveenKumar 我可以控制滚动时从 1 到 0 的不透明度动画，但我可以使用 FadeOut 来控制它，因此我想在不透明度降低到 0 后最后运行它的原因。任何建议？
为什么在不透明度为 0 之后不只是 .hide()？
@PraveenKumar 你能在 jSFiddle 中演示吗？

标签： javascript jquery html css

【解决方案1】：

你可以使用jqueryanimate函数来改变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();
    });
});

【讨论】：