jQuery的最接近（）;

Question

我试图动画被部分地隐藏图像：列表项内（通过溢流隐藏）。我想这是当用户在一个徘徊在同一列表项中的标签发生。

我有以下标记：

<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");
    }
);

任何人有这是为什么不工作的任何想法！ - 任何帮助非常感谢： - ）

Answer 1

closest()仅选择当前元素及其父元素（然后它限制到第一匹配）。

您img元素是不是你对悬停处理程序的链接的父母，所以这是行不通的。

更新：为ScottyUSCD指出，以前的代码我张贴将无法正常工作。我误读了源和认为要素是兄弟姐妹。

他的回答是正确的：

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

此将导航到最近的父li元件，然后通过该元素的子元素查找任何img元件。

Answer 2

我认为它应该是：

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

或者你可以这样做：

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

Answer 3

如果该<img>也可以是<h2>后，可以使用：

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