Сдвиньте весь div вниз, а не покажите на slideDown/slideUp

Question

У меня есть функция, когда заголовок достигает определенного div при прокрутке вниз, логотип скользит вниз на навигационную панель. Это работает, но использование слайда jQuery, похоже, «раскрывает» div, а не показывает весь div сразу и сдвигает этот div вниз.

Что он делает это нормально, так как я использую элементы из здесь:

http://api.jquery.com/slideDown/

Но я, как после этого примера, когда парил над судоходством: http://aaronjwood.com/

Есть еще один способ использования JQuery css? Любые ссылки были бы замечательными!

Вот мой JQuery, чтобы поддержать мой вопрос:

$(".logo .visible").hide(); 

    var topOfOthDiv = $("#home-2").offset().top; 

    $(window).scroll(function(e) { 
     e.preventDefault(); 
     if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div? 
      $(".logo .visible").slideDown(300); //reached the desired point -- show div 
     }else{ 
      $(".logo .visible").slideUp(300); 
     } 
    }); 

логотипа CSS:

h1.logo { 
    width:126px; 
    height:58px; 
    float:left; 
    margin:0 0 0 40px; 
    margin-left:40px; 

} 

.logo .visible{ 
    display:none; 
    height:100%; 
    background-color:#2e2e2e; 
    background:url(../images//logo.jpg) no-repeat; 
} 

HTML

<div id="nav"> 
     <div class="nav_wrapper"> 
     <h1 class="logo"><div class="visible"></div></h1> 
      <ul id="navigation"> 
      </ul> 
     </div> 
    </div> 

В скрипке Js, когда деталь щелкнула, панель «раскрывает» себя, а затем сползает div вниз как целое (как пример link дальше вверх ^^). Надеюсь, это имеет смысл.

Ссылка: http://jsfiddle.net/sVCvF/

Answer 1

вместо slideDown вы можете использовать animate скользить вниз. , например, можно использовать следующим образом: http://jsfiddle.net/sVCvF/

$(document).ready(function(){ 
    $("#flip").on('click', function(){ 
     $("#panel").animate({'margin-top': 0}, 1000); 
    }); 
}); 

вам нужно использовать некоторые настройки на этот код