Question

我正在尝试在页面加载时滚动div，暂停几秒钟，然后滚动并关闭。类似于我们在cnn.com和其他网站上看到的advt横幅。我是如何做到的？我试图在document.ready中执行以下操作，但无法使其工作。请帮帮我。

$(document).ready(function(){

    function rolldownDiv(){

           if ($('#feature-content').is(":hidden"))
           {
                $('#feature-content').slideDown().delay(10000);
           } else {
                $('#feature-content').slideUp().delay(10000);
           }
           return false;        
}

rolldownDiv();
});

我对“feature-content”div有以下css：

/* Mozilla ignores crazy MS image filters, so it will skip the last line in the
following */
#feature-content {
    float:left;
    width: 950px;
    margin: auto;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparent.png');
    display:none;
}

/* IE ignores styles with [attributes], so it will skip the following. */
#feature-content[id] {
    float:left;
    width: 950px;
    margin: auto;
    background-image:url(images/transparent.png);
    display:none;
}

Answer 1

目前尚不清楚究竟什么“不起作用”，但如果你想延迟动画，你需要改变

$('#feature-content').slideDown().delay(10000);

到

$('#feature-content').delay(10000).slideDown();

// or
setTimeout(function () {
    $('#feature-content').slideDown();
}, 10000);

如果您希望动画自行上移：

$('#feature-content').slideDown().delay(10000).slideUp();

为什么需要进行if ($('#feature-content').is(":hidden"))检查？怎样才能在文档准备好时隐藏#feature-content元素？如果这是CSS的问题，这应该可以正常工作：

#feature-content {
    float:left;
    width: 950px;
    margin: auto;
    background-image:url(images/transparent.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparent.png');
    display:none;
}

Answer 2

听起来你想要这样做：

$(document).ready(function() {
    $('#feature-content').slideDown().delay(10000).slideUp();
}

在页面加载时滚动然后翻转

2 个答案: