jQuery的節目格

<html> 
<body> 
    <div id="btn"> 
     <div id="reveal"> 
     </div> 
    </div> 
    <div id="btn2"> 
     <div id="reveal2"> 
     </div> 
    </div> 
    <style> 
     #btn, #btn2 
     { 
      background-color: red; 
      height: 100px; 
      width: 200px; 
     } 
     #btn2 
     { 
      margin-top: 10px; 
     } 
     #reveal, #reveal2 
     { 
      background-color: green; 
      height: 400px; 
      width: 200px; 
      display: none; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script> 
     $('#btn').hover(function() { 
      $('#reveal', this).stop(true, true).slideDown("normal"); 
     }, function() { 
      $('#reveal', this).stop(true, true).hide(); 
     }); 
    </script> 
</body> 
</html>

我有一個網頁上的標籤的牆，我當了一個用戶滾動我想一個div超過滑過同一片滑動以及位於下方的任何標籤。jQuery的節目格

如果你運行我的演示代碼，你可以看到被揭示的div在頁面後面的div後面。

是否有可能使此工作？

另外，內部div比它的容器高嗎？

我試圖做的另一件事是把內部div放在外部，然後絕對放置它，使它出現在按鈕上。

position: absolute; 
top: 0;

這會導致btn div不斷重新觸發動畫的不幸效果。它確實解決了這個問題。

來源

2013-02-07 Ian Warburton

是的，它是壞..什麼是孩子怎麼可能是哥哥，然後父。不合邏輯的。 – Kingk

那麼我可以做到這一點？ –

只需添加position:relative到btn和reveal元素，並添加z-index:999到reveal元素。

而且最好使用類具有共同的造型和行爲的元素..

的Html

<div class="btn"> 
    <div class="reveal"></div> 
</div> 
<div class="btn"> 
    <div class="reveal"></div> 
</div>

CSS

.btn { 
    background-color: red; 
    height: 100px; 
    width: 200px; 
    position:relative; 
    margin-bottom:10px; 
} 
.reveal { 
    background-color: green; 
    height: 400px; 
    width: 200px; 
    display: none; 
    z-index:999; 
    position:relative; 
}

和jQuery的

$('.btn').hover(function() { 
     $('.reveal', this).stop(true, true).slideDown("normal"); 
    }, function() { 
     $('.reveal', this).stop(true, true).hide(); 
    });

演示在http://jsfiddle.net/gaby/T7USy/

來源

2013-02-07 17:41:39

我現在的問題是，當我在我的實際網站上做這件事時，當它滑落到它的容器高度以下時，顯示會跳躍。所以動畫只有一半有效。 –

@IanWarburton，你可以發佈一個鏈接到實際的網站？ –

Soz ...它不在互聯網上！我只是讓它淡入，而不是滑下來。 –

這是你想要的東西：fiddle

<!doctype html> 
<html> 
<body> 
    <div id="btn"> 
     <div id="reveal">1111111111</div> 
    </div> 
    <div id="btn2"> 
     <div id="reveal2">222222222</div> 
    </div> 
    <style> 
     #btn, #btn2 { 
      background-color: red; 
      height: 100px; 
      width: 200px; 
      position:relative; 
      z-index:3; 
     } 
     #btn2 { 
      margin-top: 10px; 
      z-index:1; 
     } 
     #reveal, #reveal2 { 
      background-color: green; 
      height: 400px; 
      width: 200px; 
      display: none; 
      position:absolute; /*<--update it*/ 
      left:0;   /*<--update it*/ 
      top:0;    /*<--update it*/ 
      z-index:2; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script> 
     $('[id^=btn]').hover(function() { 
      $('[id^="reveal"]', this).stop(true, true).slideDown("normal"); 
     }, function() { 
      $('[id^="reveal"]', this).stop(true, true).hide(); 
     }); 
    </script> 
</body>

來源

2013-02-07 17:37:27 Jai

哦，是啊！我嘗試了Z-index，但顯然沒有把它做對！謝謝。 –

我現在面臨的問題是，當我在我的實際網站上做這件事時，當它滑落到其容器的高度以下時，顯示跳躍。所以動畫只有一半有效。 –

沒有得到它。它沒有顯示完全展開？ – Jai

jQuery的節目格

回答

相關問題