So blenden Sie von unten nach oben ein

Question

Ich möchte, dass ein Text von unten nach oben auf Scroll eingeblendet wird. Im Moment habe ich diesen Code:

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

Im Moment ist es blendet nur, aber ich will es von unten nach verblasst in nach oben. Irgendeine Idee?

Answer 1

Fügen Sie diese Codezeile Ihre Animationsoptionen:

JavaScript:

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

Und Ihre CSS:

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

Auf diese Weise sind Sie nicht nur Animieren der opacity des Elements, aber es ist auch margin-top Eigenschaft, effektiv es ausbleichen, wenn 50px nach unten bewegen.