CSS DIV定位和jQuery的效果基本show瘋狂

解決看評論下方CSS DIV定位和jQuery的效果基本show瘋狂

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#playlistToggle').click(function(event) { 

     event.preventDefault(); 

     if($('#playlist').is(":hidden")) 
     { 
      $('#playlist').slideUp('medium'); 
     } 

     else 
     { 
      $('#playlist').slideDown('medium'); 
     } 

    }); 

}); 
</script> 

<style type="text/css"> 
    #playlist_wrapper 
    { 
     bottom: 30px; 
     height: 75px; 
     overflow: hidden; 
     position: fixed; 
     width: 100%; 
     background-color: yellow; 
    } 

     #playlist 
     { 
      background-color: #FF6633; 
      border: 1px solid #666666; 
      height: 75px; 
      width: 920px; 
      position: relative; 
      bottom: 0; 
      margin: 0 auto; 
      visibility: hidden; 
     } 
</style> 

</head> 

<a href="#" id="playlistToggle">Toggle Playlist</a> 

<div id="playlist_wrapper"> 
    <div id="playlist"></div> 
</div>

這個腳本應該當你點擊該按鈕向上滑動播放列表格。但是，當你擊中它時什麼都不會發生。如果你改變：

如果（$（ '＃播放列表'）是（「：隱藏」））

要：

如果（$（ '＃播放列表' ）.is（「：visible」））

並將css #playlist visibility屬性從「hidden」更改爲「display」，然後div滑動到頂部，然後滑動到底部，與我想要的完全相反。我在這裏做錯了什麼？

編輯：澄清：我需要從一開始就隱藏播放列表div，然後當我點擊切換按鈕時向上滑動。

來源

2011-02-03 soren.qvist

的對象，如果

* They have a CSS display value of none. 
* They are form elements with type="hidden". 
* Their width and height are explicitly set to 0. 
* An ancestor element is hidden, so the element is not shown on the page.

它不出現的#playlist符合任何標準等於是選擇不匹配只是conisdered隱藏在#playlist。你能否取消.is(':hidden')部分，並在沒有它的情況下付款？

來源

2011-02-03 23:00:58 Jeff

.slideUp爲.hide（對於如何獲得的效果儘管有不同的設置）的同義詞

同樣

.slideDown爲.show

所有4的同義詞只是預設動畫。

如果你閱讀效果基本show和了slideDown jQuery的文檔，他們是這樣的：

slideUp:

說明：隱藏與滑動匹配的元素。

slideDown:

描述：顯示與滑動運動的匹配元素。

人機工程學：使用了slideDown做的東西看得見，而不是效果基本show

來源

2011-02-03 22:59:15

如果我恢復'if'語句中的函數，它仍然沒有做任何事情？ – 2011-02-03 23:11:18

您不能使用slideDown（顯示功能）使某些東西從屏幕底部向上滑動，這就是您的問題。你必須重新思考你在做什麼。 – 2011-02-03 23:28:39

CSS DIV定位和jQuery的效果基本show瘋狂

回答

相關問題