基于滚动的Jquery动画问题

时间:2015-03-03 19:44:49

标签: jquery animation scroll fadein scrolltop

我创建了一个移动网站帽子,屏幕两侧各有一个固定按钮。在向下滚动页面550像素后,按钮应该出现。

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

正如您所看到的,链接在加载时出现,然后当您滚动最微小的位时,它们就会消失。然后,在出现550像素之后。因此,问题在于,当浏览器窗口显示时,它们加载太快。最好以小于640像素的浏览器宽度查看此页面,以获得我尝试创建的理想体验。

以下是我用于两个按钮的脚本:

$(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);
}

先谢谢你们的帮助!

1 个答案:

答案 0 :(得分: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);
}
})
})