jquery - 滚动时淡入和淡出

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/