2

リスト項目内で (overflow: hidden によって) 部分的に非表示になっている画像をアニメーション化しようとしています。ユーザーが同じリスト項目内の 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");
    }
);

これが機能しない理由は誰にもわかります！-どんな助けでも大歓迎です:-)

4

3 に答える 3

11

私はそれがあるべきだと思います：

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

または、次のようにすることもできます。

$(this).closest("h2").prevAll("img")
于 2009-11-08T19:22:34.203 に答える
10

closest()現在の要素とその親要素のみを選択します (そして、最初に一致したものに制限します)。

要素は、ホバー ハンドラーがあるリンクの親ではないため、機能しませimgん。

更新: ScottyUSCD が指摘したように、私が投稿した以前のコードは機能しません。ソースを読み間違えて、エレメントが兄弟だと思っていました。

彼の答えは正しかった：

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

これにより、最も近い親li要素に移動し、その要素の子要素を調べますimg。

于 2009-11-08T19:17:17.693 に答える
1

<img>が の後にある可能性がある場合は<h2>、次を使用します。

$(this).closest("h2").siblings("img");
于 2013-08-06T18:04:50.013 に答える