Прыжки по нагрузке jQuery

Question

В основном у меня есть div в самом верху моего сайта, который я хочу скрыть, и когда вы нажимаете кнопку, он толкает весь сайт вниз и раскрывает его содержимое.Очень похоже на это nd.edu (щелкните справочный центр или сайты с тополями в правой части заголовка).Я использую JQuery для достижения этой цели.Этот скрипт работает, но он нервный, так как контент в div должен быть доступен, если JS выключен, он должен получить высоту и затем скрыть ее.Я просто ищу способ, чтобы «ящик» не открывался, а не закрывался при загрузке страницы, скорее, кажется, что там ничего нет, пока вы не нажмете на ссылку (как в nd.edu).Любая помощь будет отличной.

// Quick Links Slider Effect// Define Vars var $links = $('#quick_links'); var height = $links.height();

// Set the height of #quick_links to 0 $links.hide().css({height: 0});

// When slide is click kick of the function
$(".slide").click(function(){
    // If its visible aniamate to 0
    if($links.is(":visible")){
        $links.animate({height: "0"}, {duration: 300, complete: function(){
            $links.hide();
        }
        });
    }
    // Else animate the height down
    else {
        $links.show().animate({height : height}, {duration: 300});
    }
    return false;
});

Вот мой HTML и CSS

        #quick_links{background:url(../images/drawer_shadow.jpg) bottom left repeat-x #F6F8F7;width:100%; padding-bottom:20px; position:relative; z-index:1;}
#quick_links ul{float:left !important;margin:0 20px 0 20px;}
#quick_links_button{float:right;background:url(../images/umflint-sprite.png) -430px -132px  no-repeat;height:24px;width:101px;text-indent:-9999px;}
<div id="quick_links">
      <div class="wrapper">
                 <h3>
                    Quicklinks
                </h3>
                <ul>
                    <li>Stuff Goes Here</li>
                </ul>

            </div><!-- End Wrapper -->
          </div><!-- End QuickLinks -->
           <a href="#quick_links" class="slide" id="quick_links_button" name="quick_links_button">Quick Links</a>
         <div id="content">
               blah blah blah
         </div>

Answer 1

Вы должны использовать $.slideDown() вместо анимации по высоте. Что касается сокрытия при загрузке документа:

$(function(){
  $("#quick-links").hide();
});

Чтобы скрыть это:

$("#quick-links").slideDown(300);

И показать это:

$("#quick-links").slideUp(300);

Answer 2

Хороший ответ Джонатана, но он будет скрывать div только после загрузки Jquery. Если это еще не достаточно рано для вас, вы можете сделать что-то вроде этого:

<style type="text/css">
#hiddenbox {display:none;}
</style>
<script type="text/javascript">
    // this will write the hidden box for people that have JS enabled
    document.write("<div id='hiddenbox'>stuff goes here</div>");
</script>
<noscript>
    <!-- this will write the visible box for people that have JS disabled -->
    <div id='alternatebox'>stuff goes here</div>
</noscript>

Это вставит ваш скрытый ящик, только если у человека активна JS, в противном случае он вставит видимый ящик.