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

Question

我在移動網站上爲不支持固定位置的移動瀏覽器僞造了頁腳的固定位置。 （iOS版的iOS 5，安卓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手機，但我不希望使用jQuery Mobile的整體只是這一個小東西。

在此先感謝。

Answer 1

嘗試動畫功能

這是不會掉色的，但應反而順利移動。

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

你想要做什麼是油門您的滾動回調：

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