下から上にフェードインする方法

Question

スクロールの下から上にテキストがフェードインしたい場合があります。それだけでフェードイン今

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

、私はそれが下から上にフェードインしたい： は、今私はこのコードを持っています。 アイデアはありますか？

Answer 1

アニメーションのオプションにこのコード行を追加します。

は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を下に移動すると効果的にフェードアウトします。