jquery滾動到div並顯示一個特定的時間和隱藏

Question

我正在尋找執行如下在查詢- 在文檔準備好的事件。如果cookie值爲1，則滾動至特定的div並顯示3秒鐘，然後隱藏並移除cookie。

這裏是我的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（offset-message）多次閃爍然後隱藏。

Answer 1

我認爲fadeIn和animate都會影響不透明度值。你也立即調用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); 
      } 
     }); 
    } 
});