JQuery slideDown（）函數不會推入元素，但隱藏它們

我在設計橫幅時遇到問題。請看看這個JSfiddle。橫幅應在3秒後出現，根據其高度移動所有頁面元素，在3分鐘後移動slideUp（），恢復頁面元素的位置。基本上，我想它像this工作：JQuery slideDown（）函數不會推入元素，但隱藏它們

這裏是我的網頁：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Banner</title> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
<script> 
    var minutes, seconds; 

    $(function() { 
     initBanner('#banner'); 
    }); 

    function initBanner(bannerId) { 
     /*  if (getCookie('FIRST_VISIT') == "") { 
     setCookie('FIRST_VISIT', 'true', 180);*/ 
     $(bannerId).hide(); 
     $(bannerId).delay(3000).slideDown(); 
     var target_date = new Date().getTime() + 184000; 
     var timer = setInterval(function() { 

      var current_date = new Date().getTime(); 
      var seconds_left = (target_date - current_date)/1000; 

      seconds_left = seconds_left % 86400 % 3600; 

      minutes = parseInt(seconds_left % 86400 % 3600/60); 
      seconds = parseInt(seconds_left % 86400 % 3600 % 60); 

      if (seconds < 10) { 
       seconds = '0' + seconds; 
      } 

      if (minutes == 0 && seconds == 0) { 
       clearTimeout(timer); 
       $(bannerId).slideUp(); 
      } 
      // format countdown string + set tag value 
      document.getElementById('countdown').innerHTML = minutes + ":" 
        + seconds 
      " "; 
     }, 1000); 
     //} 
    } 

    function setCookie(cname, cvalue, exdays) { 
     var d = new Date(); 
     d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 
     var expires = "expires=" + d.toUTCString(); 
     document.cookie = cname + "=" + cvalue + "; " + expires; 
    } 

    function getCookie(cname) { 
     var name = cname + "="; 
     var ca = document.cookie.split(';'); 
     for (var i = 0; i < ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0) == ' ') 
       c = c.substring(1); 
      if (c.indexOf(name) != -1) 
       return c.substring(name.length, c.length); 
     } 
     return ""; 
    } 
</script> 
<style> 
body { 
    background-color: #000000; 
    color: #ffffff; 
} 

#banner { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

.logo { 
    float: right; 
    margin-right: 75px; 
    margin-top: 10px; 
} 

.countdown-timer { 
    float: right; 
    text-align: center; 
    margin-right: 1%; 
    line-height: 80px; 
    font-size: 44px; 
    background: -webkit-linear-gradient(#d8ff00, #a5ff00); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", 
     "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: lighter; 
} 

.top { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    min-width: 950px; 
    padding-bottom: 5px; 
    height: 80px; 
    background-color: #353535; 
} 

.epoint { 
    position: fixed; 
    padding: 0.7%; 
    margin-top: 5px; 
} 

.header { 
    width: 60%; 
    float: left; 
    margin-top: 1%; 
    margin-left: 15%; 
    font-size: 15px; 
    color: #ffffff; 
    line-height: 20px; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", 
     Verdana, Tahoma, sans-serif; 
    margin-left: 15%; 
} 

.headerspan { 
    font-size: 15px; 
    color: #d8ff00; 
    line-height: 20px; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", 
     Verdana, Tahoma, sans-serif; 
} 
</style> 
</head> 
<body> 
    <div id="banner" class="top"> 
     <div> 
      <div id="myimage4" class="topline"></div> 
      <img id="epoint" class="epoint" 
       src="http://www.dropticker.com/epoint.png" /> 
      <div id="myimage" class="header"> 
       Get an App like this and skyrocket your sales. Since it's 
       your first visit, <span class="headerspan">click here to get 
        early access + a free month.</span> 
       <p>This offer will disappear forever in 3 minutes so don't miss 
        out!</p> 
      </div> 
      <img class="logo" src="http://www.dropticker.com/dropticker_logo.png" /> 
      <div class="countdown-timer" id="countdown"></div> 
     </div> 
    </div> 
    <div>Lorem ipsum</div> 
</body> 
</html>

誰能幫助我？每個有用的答案，如果高度讚賞和評估。

謝謝。

來源

2014-10-05 amenoire

更改CSS，這應該這樣做：

#banner { 
    position: relative; 
}

，並補充一點：

$(function() { 
     initBanner('#banner'); 
     $(window).scroll(function(e){ 
      var top = $(document).scrollTop(); 
      if(top == 0){ 
       $('#banner').css('position', 'relative'); 
      }else{ 
       $('#banner').css('position', 'fixed'); 
      } 
     }); 
    });

得到它在這裏工作：http://jsfiddle.net/65akxewz/

來源

2014-10-05 10:53:07

這工作得很好，但旗幟不在滾動時停留在頁面的頂部。它應該呆在那裏。 – amenoire 2014-10-05 10:55:47

也許有可能通過一些計算和animate（）來實現這一點？ – amenoire 2014-10-05 10:56:29

查看我的版本。 – 2014-10-05 11:14:19

JQuery slideDown（）函數不會推入元素，但隱藏它們

回答

相關問題