如何從下往上淡入

我想讓一些文字從下往上淡入滾動。現在，我有這樣的代碼：如何從下往上淡入

$(document).ready(function() { 

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 
      $(this).animate({'opacity':'1'},1000); 
     } 
    }); 
    }); 
});

現在它只是在消失，但我希望它在從底部到頂部褪色。任何想法的？

來源

2016-09-05 Gordy Colonna

你能否發佈一個plunker來更詳細地理解你正試圖解決的問題？ –

現在，我得到了這個：https：//jsfiddle.net/tcloninger/e5qaD/，但它只是在它atm的地方消失。我想讓它淡入一種動畫，所以它從屏幕底部飛到它所屬的地方。 –

我簡單地想出了這個：https：//jsfiddle.net/8rkf4njp/它符合你的描述，但是你**在評論中增加了**更多信息來澄清要求，所以它不是你想要的，但是根據問題「從下到上淡入」（小提琴有很長的時間來顯示它在做什麼）。 –

這行代碼添加到您的動畫選項：

的JavaScript：

if(bottom_of_window > bottom_of_object){ 
    $(this).animate({'opacity':'1', 'margin-top':'50px'}, 500); 
}

和你的CSS：

#container .hideme { 
    opacity:0; 
    margin-top: 200px; 
}

通過這樣做，你不僅在動畫opacity的元素，也是它的margin-top屬性，在將50px移動到底部時有效淡出它。

來源

2016-09-05 13:15:35 Roberrrt

雖然它的密切，它不是我想要的。當我這樣做時，即時爲元素添加保證金，不需要保證金。 –

這是在我看到您的評論之前發佈的，我正在演奏小提琴以嘗試修復它，堅持;）。 – Roberrrt

好吧:)，順便說一句，這是一個我想要的例子。只是發現它：http://www.web2feel.com/freeby/scroll-effects/index3.html –

如何從下往上淡入

回答

相關問題