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

Jquery滚动到div并显示特定时间并隐藏

1 个答案: