2012-07-13 17 views
5

ここに私が見つけたスクリプトを追加しました。それは治療に役立ちます。しかし、私はそれにフェード効果を適用しようとすると固まった。分だけ、それはちょうど途絶えます。スクロール効果をフェードアウト

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> 

編集:私はこれを縛って動作させます。本当にありがとうございました男:

<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>​ 

答えて

2

あなたはその効果のために.animate()または.fadeTo()を使用する必要があります。

.css('opacity', opacity);を使用すると、要素が突然消えるようになります。

+0

申し訳ありません私はちょっとばかげています。$( 'social').animate( "slow")に変更します。 – Michael

+1

ここで '.fadeTo()'を使う方が簡単です。あなたは '$( '。social')のようなものを使うことができます。fadeTo( 'slow'、opacity);'また、 'slow'ではなく、フェードするのに必要なミリ秒数を使うことができます。たとえば、 '$( '。social').fadeTo(500、opacity);' – RRikesh

関連する問題