基于滚动 Jquery 的动画问题

Question

我正在创建一个移动网站帽子，在屏幕的每一侧都有一个固定按钮。这些按钮应该在页面向下滚动 550 像素后出现。

这是 link 我的网站：http://www.unf.edu/~n00804716/adv-web/project01/stops/museum.html

如您所见，link 会在加载时出现，然后当您滚动到最微小的位置时，它们就会消失。然后，在 550 像素后它们出现。所以，问题是它们加载得太快，就在浏览器 window 启动时。最好在小于 640px 的浏览器宽度下查看此页面，以获得我正在尝试创建的理想体验。

这是我用于两个按钮的脚本：

$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button.one").fadeOut(400);
} else {
    $("button.one").fadeIn(400);
}

 $(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button.two").fadeOut(400);
} else {
    $("button.two").fadeIn(400);
}

提前谢谢大家的帮助！

Answer 1

用 .hide() 隐藏按钮。你不能淡入已经存在的东西：http://jsfiddle.net/kv7L0c5d/17/

$(document).ready(function () {

    $('button').hide();

$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
    $("button").fadeOut(400);
} else {
    $("button").fadeIn(400);
}
})
})

基于滚动 Jquery 的动画问题

Scroll based Jquery animation issue

jquery

animation

scroll

fadein

scrolltop