jQuery 最接近（）；答案

【问题标题】：jQuery closest();jQuery 最接近（）；
【发布时间】：2009-11-08 19:12:04
【问题描述】：

我正在尝试为列表项中部分隐藏（通过溢出：隐藏）的图像制作动画。我希望当用户将鼠标悬停在同一列表项内的 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");
    }
);

任何人都知道为什么这不起作用！ - 非常感谢任何帮助:-)

【问题讨论】：

我最近发现涉及溢出的动画在 FireFox 中会变得很冒险。在我的例子中，它是一个溢出的 div，我实际上移动了它的包含元素，但它在 FireFox 中弄得一团糟。我（完全）不确定这是否适用于您，但我建议您在 FireFox 和其他浏览器中进行一些测试。
我推荐像这样使用原生closest $(this.closest('img')).animate... 它会显着增加代码（见jsperf.com/jquery-closest-vs-element-closest）

标签： jquery css jquery-animate closest

【解决方案1】：

我认为应该是：

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

或者你可以这样做：

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

【讨论】：

【解决方案2】：

closest() 只选择当前元素及其父元素（然后将其限制为第一个匹配项）。

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

更新： 正如 ScottyUSCD 所指出的，我之前发布的代码不起作用。我误读了来源，并认为这些元素是兄弟姐妹。

他的回答是正确的：

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

这将向上导航到最近的父 li 元素，然后在该元素的子元素中查找任何 img 元素。

【讨论】：

天哪，我不知道那个。我会使用 parent().find()
太好了 - 谢谢...所以我的 javascript 应该是： $("#projects li h2 a").hover( function () { $(this).prevAll("img").animate ({paddingTop: "10px"}, "slow"); }, function () { $(this).prevAll("img").animate({paddingTop: "0"}, "slow"); });努力使这项工作仍然存在 - 抱歉！
这行不通，因为“a”和“img”不是兄弟姐妹。 a 是“h2”的孩子
@ScottyUCSD，是的，你是对的，我误读了 HTML。您发布的答案将起作用。

【解决方案3】：

如果<img> 也可以在<h2> 之后，请使用：

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

【讨论】：