Question

我试图制作如果scrollTop＆gt;出现的按钮; 200并且当scrollTop＆lt;时隐藏200.但是我希望按钮能够淡化并出现问题。

继承我的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属性有效，但是这个下面的其他按钮在显示/隐藏后改变了它们的位置（按钮位置：固定;滚动页面），使效果不是很好..

我有什么想法可以让它褪色和渐弱？谢谢

Answer 1

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

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

DEMO： http://jsfiddle.net/qXunw/

Answer 2

VisioN的答案似乎有效。我唯一要添加的是一个布尔值来跟踪按钮的动画效果。

 var animating = false;

那样你的if语句就像

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

目的是，当用户继续滚动时，动画会继续重置，每次设置间隔设置为1.5秒。因此，在您停止滚动之前，按钮不会完全淡入，这可能不是您想要的。为了解决这个问题，你在设置淡入时将'animating'布尔值设置为true，然后在回调函数中将其设置为false。

滚动时的Fadein和Fadeout

2 个答案: