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

Question

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

这是我正在使用的 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 Mobile 中存在此功能，但我不想将整个 JQuery Mobile 用于这件小事。

提前致谢。

Answer 1

你想要做的是限制你的滚动回调：

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

Answer 2

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

这不会褪色，但应该平稳移动。

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

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

Answer 3

改变

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