2

我试图制作如果 scrollTop > 200 时出现的按钮并在 scrollTop < 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 属性，它起作用了，但是这个按钮下的其他按钮在它显示/隐藏后改变了它们的位置（按钮是位置：固定；随着页面滚动），使得效果不是很好..

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

4

2 回答 2

5

您的代码看起来不错，但是我最好添加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/

于 2012-05-18T23:50:31.397 回答
0

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

 var animating = false;

这样你的 if 语句就会像

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

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

于 2012-05-19T00:22:25.833 回答