javascript - 如何在使用 JQuery 更改 CSS 时添加淡入淡出效果

Question

对于不支持固定位置的移动浏览器，我在移动网站上伪造了页脚的固定位置。 (iOS 5之前的iOS、2.2之前的Andriod等)

这是我正在使用的 JQuery 代码，它运行良好并且可以实现我想要的功能:

function changeFooterPosition() {   
  $('.not-fixed').css('top', window.innerHeight + window.scrollY - 56 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
}); 

这样就可以了。

我的问题是，我想添加一点延迟，让页脚淡入 View ，而不是在每次小滚动后快速捕捉。我环顾四周，发现了以下可以使用的方法，但我不确定它们是否正确，或者不确定将它们添加到上面的 js 中的位置。

.delay(1000).fadeTo('slow', 1)

我知道 JQuery Mobile 中存在此功能，但我不想仅仅为了这一点小事而使用整个 JQuery Mobile。

提前致谢。

Answer 1

尝试动画功能 http://api.jquery.com/animate/

它不会褪色，但应该平滑移动。

function changeFooterPosition() {   
  $('.not-fixed').animate({'top': window.innerHeight + window.scrollY - 56 + "px"}, 2000);
}

$(document).bind('scroll', changeFooterPosition);