0

キャプション付きの画像コンテナーがあり、その上にカーソルを合わせると、キャプションがスライドインする予定で、jQuery slideToggle を使用しています。これがコードです...

<div class="image">
    <div class="caption">Caption Content</div>
</div>


$('.image').hover(function() {
    $('.image .caption').slideToggle('slow', function() {
    // Animation complete.
    });
});

ここに作業バージョンがあります: http://jsfiddle.net/HZAHg/

...問題なく動作します。ただし、複数のインスタンスがあるため、そのうちの 1 つにカーソルを合わせると、すべてアクティブになります。一度に 1 つだけがアクティブになるようにするにはどうすればよいですか (マウスオーバーしたもの)。

ありがとう。

4

3 に答える 3

1

これを試して：

$('.image').hover(function() {
    $(".caption", this).slideToggle('slow', function() {
    // Animation complete.
    });
});​

画像がホバーされているため、'this' は画像を指します。セレクターのコンマの後に何かを入れると、そのセレクターのノード セット内のみを検索することを意味します。ここでは、「(これ) の上に置かれた '.image' ノードの中を見て、その中の .caption を探してください」と言っています。

お役に立てれば。

于 2012-07-03T19:53:44.313 に答える
0

これを試して：

$('.image').hover(function() {
    $('.caption', this).slideToggle('slow', function() {
    // Animation complete.
}); });
于 2012-07-03T19:51:27.840 に答える
0

これを試して：

$('.image').hover(function() {
    $('.caption', this).slideToggle('slow', function() {
        // Animation complete.
    });
});

更新されたフィドル

于 2012-07-03T19:52:41.713 に答える