製作當使用著移動到下面的時候才顯示的效果。
實際應用於 toolman 首頁的用法
$(document).ready(function() {
$(window).scroll(function() {
$('.article').each(function(i) {
var t = $(this).offset().top + 40; // 要顯示的位置
var n = $(window).scrollTop() + $(window).height(); // 當前的位置
if (n > t {
$(this).animate({
'opacity': '1', // 0完全透明 1不透明
}, 1000); // 1s
}
});
});
// 自動捲動不然一開始會都沒有顯示
// 試著往下滑然後往上可是沒有成功
window.scrollBy(0, 3); // (x, y)
});
因為我把他們全部一開始都設定成隱藏的狀態，要有捆動的時候才會顯示，擔當頁面中的內容不足以有況動的範圍時，就會顯示不出來，所以今天多新增一點東西，強至將高度設定筆螢幕高10px。