向下滑動整個div而不是在slideDown/slideUp上顯示

我有一個函數，當頁眉向下滾動時，標題達到某個div時，該標誌滑落到導航欄上。這工作，但使用jQuery向下滑動似乎'揭示'div而不是立即顯示整個div，並滑動該div。向下滑動整個div而不是在slideDown/slideUp上顯示

它在做什麼是正常的，因爲我使用從這裏的元素：

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（例如鏈接進一步向上^^）。希望這是有道理的。

鏈接：中http://jsfiddle.net/sVCvF/

來源

2013-06-25 user2212564

你能不能設置一個[*** ***的jsfiddle（http://jsfiddle.net /）你的問題？你的HTML沒有提供足夠的信息，所以我不確定這個問題，儘管它「看起來」好像應該可以正常工作。 – SpYk3HH

js小提琴示例添加:) – user2212564

大聲笑，現在我更加困惑，你發佈的jsFiddle完全是它應該做的恰到好處。你期待的結果是什麼，因爲我試圖幫助解決這個問題，但我沒有看到「問題」呢？ – SpYk3HH

代替slideDown你可以用animate它滑下。例如u可以使用這樣的：http://jsfiddle.net/sVCvF/

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

你就需要使用一些調整，這個代碼

來源

2013-06-25 14:21:28 Chanckjh

我使用你的例子對它進行了排序，在之前的評論中我使用了'animate'和'top'這兩個詞，所以我差不多在那裏！一旦它被完善，將會發布我的代碼。謝謝 – user2212564

我在腳本中包含了jQuery，這很好，但出於某種奇怪的原因，即使我將其更改爲快速並且僅在動畫邊緣頂部和幻燈片備份時才需要很長時間才能滑下來？我在你的答案中包含了我的代碼。謝謝 – user2212564

啊，似乎只在Firefox上 - 將不得不研究！ – user2212564

向下滑動整個div而不是在slideDown/slideUp上顯示

回答

相關問題