Fundido de efecto de desplazamiento

Question

Agregué un script que encontré aquí. Funciona un regalo. Sin embargo, me he quedado atascado al tratar de aplicarle un efecto de fundido. En el momento, simplemente se corta.

script type="text/javascript"> 


    $(document).ready(function() { 


     $(window).scroll(function() { 
       var height = $('body').height(); 
       var scrollTop = $('body').scrollTop(); 
       var opacity = 1; 


       if(scrollTop > 400) { 
        opacity = 0; 
       } 

      $('.social').css('opacity', opacity); 
     }); 
    }); 
</script> 

EDIT: I ató esto y funciona. Muchas Gracias chicos:

<script type="text/javascript"> 
$(window).scroll(function() { 
// The social div 
var $socialDiv = $('.social'); 

//Get scroll position of window 
var windowScroll = $(this).scrollTop(); 

//Slow scroll of social div and fade it out 
$socialDiv.css({ 
'margin-top' : - (windowScroll/3) + "px", 
'opacity' : 1 - (windowScroll/550) 
}); 
}); 
</script>​ 

Answer 1

Se deben utilizar .animate() o .fadeTo() para ese efecto.

El uso de .css('opacity', opacity); hará que su elemento desaparezca abruptamente.