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

Question

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

下面是我正在使用的JQuery代码，它工作得很好，可以做我想做的事情：

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

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

所以这是可行的。

我的问题是，我想给它增加一点延迟，让页脚淡入视图，而不是在每一次滚动后快速抓取。我环顾四周，发现了以下我可以使用的方法，但我不确定它们是否是正确的，也不确定将它们添加到上面的js中。

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

我知道移动端已经有这个功能了，但是我不想为了这一件小事而使用整个JQuery移动端。

提前谢谢。

Answer 1

尝试动画函数http://api.jquery.com/animate/

这不会褪色，而是应该平滑地移动。

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

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

Answer 2

变化

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

至

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

变化

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

至

var WantedSpeed = 2000;
$('.not-fixed').delay(1000).animate({
    top: window.innerHeight + window.scrollY - 56 + "px"
}, WantedSpeed, function() {
    // Animation complete.
})

Answer 3

你想要做的是限制你的scroll回调：

(function() {
  var scrollTimer = 0,
      $notFixed = $('.not-fixed');

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

  $(document).bind('scroll', function() {
    $notFixed.hide();
    clearTimeout(scrollTimer);
    setTimeout(changeFooterPosition, 50);
  });
}());