jQuery nearest();

Question

我正在尝试为列表项中部分隐藏(通过溢出:隐藏)的图像设置动画.我希望当用户将鼠标悬停在同一列表项中的A标记上时发生这种情况.

我有以下标记:

<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

我认为它应该是:

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

或者你可以这样做:

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

Answer 2

closest() 仅选择当前元素及其父元素(然后将其限制为第一个匹配).

您的img元素不是您拥有悬停处理程序的链接的父级,因此它不起作用.

更新:正如ScottyUSCD指出的那样,我发布的上一个代码将不起作用.我误读了消息来源并认为元素是兄弟姐妹.

他的回答是正确的:

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

这将导航到最接近的父li元素,然后查看该元素的子img元素以查找任何元素.