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