滚动时的Fadein和Fadeout

Question

我试图制作如果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属性有效,但是这个下面的其他按钮在显示/隐藏后改变了它们的位置(按钮位置:固定;滚动页面),使效果不是很好..

任何想法我怎么能让它淡化和淡出？谢谢

Answer 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/