滚动上的淡入淡出答案

【问题标题】：Fadein and Fadeout on scroll滚动上的淡入淡出
【发布时间】：2012-05-19 21:33:05
【问题描述】：

我正在尝试制作在 scrollTop > 200 时出现的按钮并在 scrollTop

这是我的 javascript：

$(window).scroll(function(){
  if($(this).scrollTop() > 200) {
    $(".button").removeClass("opacity");
  }
  else {
    $(".button").addClass("opacity");
  };

和CSS：

.opacity { opacity:0; }

使用这样的代码，显示/隐藏功能可以正常工作，但无法使其淡入。我还尝试将我的 jscript 更改为：

$(window).scroll(function(){
  if($(this).scrollTop() > 200) {
    $(".button").animate({"opacity":"1"}, 1500);
  else {
    $(".button").animate({"opacity":"0"}, 1500);
  };

但是有了这个，它根本不起作用。

我尝试的最后一件事是fadeIn 和fadeOut 属性有效，但是在这个按钮下的其他按钮在显示/隐藏后改变了它们的位置（按钮是位置：固定；随着页面滚动），使得效果不是很好..

有什么想法可以让它淡入淡出吗？谢谢

【问题讨论】：

使用淡入/淡出如何改变其他按钮的位置？也许他们有问题（jsbin.com/otabol/3）

标签： jquery

【解决方案1】：

您的代码看起来不错，但我最好添加 stop 方法并缩短持续时间。这应该可以正常工作：

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
        $(".button").stop().animate({
            opacity: 1
        }, 500);
    } else {
        $(".button").stop().animate({
            opacity: 0
        }, 500);
    }
});

演示： http://jsfiddle.net/qXunw/

【讨论】：

【解决方案2】：

Vision 的回答似乎有效。我唯一要添加的是一个布尔值，用于跟踪按钮动画的时间。

 var animating = false;

这样你的 if 语句就会像

 if ($(this).scrollTop() > 200 && !animating) { ...

目的是，现在动画的方式会随着用户不断滚动而继续重置，每次间隔设置为 1.5 秒。因此，在您停止滚动之前，该按钮不会完全淡入，这可能不是您想要的。要解决此问题，您需要在设置淡入时将“动画”布尔值设置为 true，然后在回调函数中将其设置回 false。

【讨论】：