0

我有一个#top-div，它显示“到网站顶部”-文本。当我执行以下代码时，它可以在没有“else”的情况下工作 - 然后在滚动 700px 后显示 div。

但是“else”不起作用，它根本不会显示。当您再次向上滚动到网站顶部时，应该隐藏 div。

任何帮助表示赞赏。

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").animate({"opacity":"0.6"});
    }
    else {
        $("#top").animate({"opacity":"0"});
    }
4

1 回答 1

1

我怀疑动画没有按预期工作，因为当您来回滚动超过 700px 边界时，动画效果已排队。

使用动画时，告诉 jQuery“放弃你现在正在做的事情，停止动画队列并按照你现在被告知的方式去做”是很重要的。这意味着你将不得不链接.animate一个.stop方法（阅读 .stop()），即：

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").stop(true, false).animate({"opacity":"0.6"});
    }
    else {
        $("#top").stop(true, false).animate({"opacity":"0"});
    }
}

该.stop(true, false)方法强制 jQuery 清除动画队列，但不强制元素跳转到动画的末尾 - 这是因为.scroll()当用户滚动时会多次触发该事件。如果我们使用.stop(true, true)过渡将是突然的。

替代方案包括：

  • .scroll()去抖动或限制事件
  • 不要使用.animate()，而只需使用 CSS 设置不透明度并利用 CSS 过渡，例如transition: opacity .25s ease-in-out.

这是一个概念验证小提琴 - http://jsfiddle.net/teddyrised/zdpMd/

于 2013-03-24T11:52:11.943 回答