將元素滑入頁面？

我想知道如何在頁面底部隱藏一個橫幅。將元素滑入頁面？

例如：

頁面加載
3秒後，該橫幅

我希望能夠做到這一點，但不出現任何滾動（底部向上滑動無改變頁面高度），並且在它向上滑動之前不會暴露橫幅。

我看着slideUp()和slideToggle()，但我無法找到一種方法，使工作合我的胃口： -/

這是我最初的嘗試：

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

而CSS是visiblity: hidden;

來源

2012-01-08 Gray Adams

這將是一個小的影響很多工作。 '.slideUp（）'是一個適當的位置效果。從頁面底部滑動它需要一定的工作量，並且可能會讓用戶非常討厭。 – Ktash 2012-01-08 17:36:21

我認爲你應該更具體地說明效果應該如何工作。例如，「頁面底部」是什麼意思？整個文檔的底部或瀏覽器視圖端口的底部邊緣？ – Gumbo 2012-01-08 17:50:01

使用位置：固定在橫幅廣告上，並將底部屬性動畫爲0 將初始底部屬性設爲其高度的負值。

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

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

來源

2012-01-08 17:38:04

像魅力一樣工作。 techfoobar也很好，但他沒有使用jQuery的延遲，這需要比所需更多的工作。 – 2012-01-08 17:55:01

動畫height屬性，而不是頂部：

在你的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. 
    }); 
});

來源

2012-01-08 17:38:54 techfoobar

我收到您提供的那行代碼中的錯誤。 – 2012-01-08 17:50:15

編輯我的答案。「慢」之前有一個逗號失蹤！ – techfoobar 2012-01-08 17:57:52

這裏有一個方法：

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。

來源

2012-01-08 17:44:05

我想你可能想沿着這些路線的東西：

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

來源

2012-01-08 17:44:05 Paulpro

位置：絕對值會使它與頁面一起滾動，更有可能希望它始終保持在最低點。固定會更好 – 2012-01-08 17:51:32

@PatrickEvans我假設他的頁面沒有滾動，因爲他說他不想滾動條出現，但是如果他的頁面滾動固定會更好，那麼你是對的。雖然我不認爲職位：IE6的固定作品 – Paulpro 2012-01-08 17:54:16

是的，我認爲他不希望滾動條出現/從動畫中消失，你的身體css照顧，但會隱藏內容，因爲不是每個人的視口大小將比內容大一些。 – 2012-01-08 18:03:46

將元素滑入頁面？

回答

相關問題