Question

我想知道如何在隐藏的页面底部向上滑动横幅。

例如：

页面加载
3秒后，横幅从页面底部向上滑动

我希望能够在没有任何滚动条出现的情况下执行此操作（页面高度没有变化）并且在向下滑动之前不显示横幅。

我查看了slideUp()和slideToggle()，但我无法找到让自己喜欢的方法： - /

这是我最初的尝试：

$(document).ready(function() {
          $('.serverad').delay(3000).slideToggle('slow', function() {
            // Animation complete.
          });
    });

CSS是visiblity: hidden;

Answer 1

使用位置：固定在横幅广告上，并将bottom属性设置为0 将初始的bottom属性设置为其高度的负值。

<style>
    .serverad
    {
         height:60px;
         position:fixed;
         left:0px;
         bottom:-60px;
    }
</style>    

<script>
    $(document).ready(function() {
              $('.serverad').delay(3000).animate({bottom:"0px"},600);
        });
</script>

Answer 2

为height属性设置动画而不是top：

在你的CSS中：

.serverad {
    ...
    height: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    visiblity: visible;
    overflow: hidden;
    ...
}

在您的JS中，将动画代码更改为：

$(document).ready(function() {
    $('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
       // Animation complete.
    });
});

Answer 3

我想你可能会想要这些内容：

HTML：

<body>
    <div class="serveraddcontainer">
        <div class="serveradd"></div>
    </div>
</body>

CSS：

body{
    overflow: hidden;    
}

.serveraddcontainer{
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: -80px;
}

.serveradd{
    width: 400px;
    height: 80px;
    background-color: red; 
    margin: auto;
}

使用Javascript：

setTimeout(function(){
    $('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);

Example JSFiddle Here

Answer 4

这是一种方法：

var stepDurations = 3000;
var reveal = window.setTimeout(
    function(){
        $('#banner').animate(
            {
                'height' : '30px'
            }, stepDurations,
            function(){
                $(this).animate(
                    {
                        'bottom' : $(window).height() - $(this).height()
                    }, stepDurations);
            });
    },stepDurations);

JS Fiddle demo

将上述内容转换为函数：

function slideReveal(target, height, stepDuration, revealName){
    if (!target) {
        return false;
    }
    else {
        var height = height || '30px',
            stepDuration = stepDuration || 2000,
            revealName = revealName || 'reveal';

        revealName = window.setTimeout(
            function(){
                $(target).animate(
                    {
                        'height' : height
                    }, stepDuration,
                    function(){
                        $(this).animate(
                            {
                                'bottom' : $(window).height() - $(this).height()
                            }, stepDuration);
                    });
            },stepDuration);
    }
};

// call with:

slideReveal($('#banner'), '3em', 100, 'revelation');

JS Fiddle demo

将元素滑入页面？

4 个答案: