jQuery closest（）;

我試圖在一個列表項目內動畫一個部分隱藏的圖像（通過overflow：hidden）。當用戶將鼠標懸停在同一列表項目中的A標籤上時，我希望發生這種情況。jQuery closest（）;

我有以下標記：

<div id="projects" class="section"> 
    <ul> 
     <li> 
      <img src="assets/img/projects/pf6.jpg" width="980" height="500" alt="Project title" /> 
      <h2 class="left middle"><span>new</span><a href="#">Title 1</a></h2> 
     </li> 
     <li> 
      <img src="assets/img/projects/pf4.jpg" width="980" height="500" alt="Project title" /> 
      <h2 class="bottom right"><a href="#">Title 2</a></h2> 
     </li> 
    </ul> 
</div>

我的基本的CSS：

#projects ul li { 
    width: 100%; 
    height: 450px; 
    position: relative; 
    display: block; 
    margin-bottom: 20px; 
    color: #fff; 
    overflow: hidden; 
} 

#projects ul li img { 
    position: absolute; 
    top: -50px; 
    left: 0; 
}

我試圖用jQuery以下移動圖像（無濟於事）：

$("#projects li h2 a").hover(
    function() { 
     $(this).closest("img").animate({paddingTop: "50px"}, "slow"); 
    }, 
    function() { 
     $(this).closest("img").animate({paddingTop: "0"}, "slow"); 
    } 
);

任何人都有任何想法，爲什麼這不工作！ - 任何非常感謝的幫助:-)

來源

2009-11-08 Fred

我最近發現那些涉及溢出的動畫可能會在FireFox中冒險。在我的情況下，它是一個溢出的div，我實際上移動了它包含的元素，但是它在FireFox中弄得一團糟。我根本不（確定）這會適用於您，但我建議您在FireFox和其他瀏覽器中進行一些測試。 – 2009-11-08 21:47:44

我推薦使用''this''這樣的''''this.closest（'img'））''animate ...''它會顯着增加代碼（參見http://jsperf.com/jquery-closest-vs-element - 最接近） – oriadam 2016-02-09 16:42:05

closest()只選擇當前元素及其父元素（然後將其限制爲第一次匹配）。

您的img元素不是您有懸停處理程序的鏈接的父級，因此它不起作用。

更新：作爲ScottyUSCD指出，我發佈的以前的代碼將無法正常工作。我誤解了消息來源，並認爲這些元素是兄弟姐妹。

他的回答是正確的：

$(this).closest("li").children("img")

這將導航到最接近的父li元素，然後通過該元素的孩子找任何img元素。

來源

2009-11-08 19:17:17

哦，漂亮，我不知道那一個。我會用父（）找到（） – stimms 2009-11-08 19:19:49

太好了 - 謝謝...... 所以我的javascript應該是：。 $（「＃項目裏H2一」）懸停（ \t \t功能（）{ \t 。\t \t $（本）.prevAll（「IMG」）動畫（{paddingTop：「10px的」}，「慢」）; \t \t}， \t \t函數（）{ \t \t \t $（本）。 prevAll（「IMG」）。animate（{paddingTop：「0」}，「slow」）; \t \t} \t）; 努力使這項工作仍然 - 對不起！ – Fred 2009-11-08 19:23:31

這不會起作用，因爲「a」和「img」不是兄弟姐妹。 a是「h2」的孩子 – ScottyUCSD 2009-11-08 19:32:18

我覺得應該是：

$(this).closest("li").children("img").animate()

或者你可以這樣做：

$(this).closest("h2").prevAll("img")

來源

2009-11-08 19:22:34 ScottyUCSD

如果<img>也可能是後<h2>，使用：

$(this).closest("h2").siblings("img");

來源

2013-08-06 18:04:50

jQuery closest（）;

回答

相關問題