divを表示して特定の時間だけ表示して非表示にするためのスクロールスクロール

Question

クエリで次のように実行します： ドキュメント準備完了イベントです。クッキー値が1の場合は、特定のdivにスクロールして3秒間表示し、クッキーを隠して削除します。ここ

は私jueryコードです：

$(document).ready(function() { 
if ($.cookie("messageshow") != null) { 
     $('html, body').animate({ 
      scrollTop: $('.offset-message').offset().top 
     }, 1500); 

     $(window).scroll(function(){ 
      var bottom_of_object = $('.offset-message').offset().top + $('.offset-message').outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      if(bottom_of_window > bottom_of_object){ 
       $('.offset-message').fadeIn('slow').animate({opacity: 1, display:'block'}, 3000).fadeOut('slow'); 
      } 
     }); 
    } 
}); 

Messge DIV CSS：

.offset-message{ 
    display: none; 
    padding: 40px 70px; 
    margin-bottom: 30px; 
    background-color: #f5f5f5; 
    text-align: center; 
    opacity: 0; 
} 

は期待どおりに動作していないようです。現在、メッセージdiv（オフセットメッセージ）が何度も点滅してから非表示になります。

Answer 1

私はfadeInとアニメーションの両方が不透明度の値に影響すると思います。また、即座にfadeOutメソッドを呼び出します。これは、3つのメソッドが同時に不透明度値を変更していることを意味します。

これはそれを修正する必要があります

$(document).ready(function() { 
    if ($.cookie("messageshow") != null) { 
     $('html, body').animate({ 
      scrollTop: $('.offset-message').offset().top 
     }, 1500); 

     $(window).scroll(function(){ 
      var bottom_of_object = $('.offset-message').offset().top + $('.offset-message').outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      if(bottom_of_window > bottom_of_object){ 
       var sel = $('.offset-message') 
       sel.fadeIn('slow'); 
       setTimeout(function(){ 
        sel.fadeOut('slow'); 
        //delete the cookie; 
       }, 3000); 
      } 
     }); 
    } 
});