1

状況は、別の要素がホバーされたときに jQuery が 1 つの要素だけをアニメーション化するようにすることです。これで、ホバー アクションの開始時にすべてのアイテムがアニメーション化されます。

コード：

<table width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="position:relative;" width="390" height="246">
            <div class="album-back"></div>
            <img id="album_action" src="../upload/img/album1.jpg" width="285" height="246" />
        </td>
        <td width="240">
            Description
        </td>
    </tr>
    <tr>
        <td style="position:relative;" width="390" height="246">
            <div class="album-back"></div>
            <img id="album_action" src="../upload/img/album2.jpg" width="285" height="246" />
        </td>
        <td width="240">
            Description
        </td>
    </tr>
</table>

jQuery:

$(document).ready(function(){
    $("#album_action").hover(function(){
        $('.album-back').stop().animate({'margin-left': '150px'}, 400);
    }, function(){
        $('.album-back').stop().animate({'margin-left': '100px'}, 250);
    });
});

ID "#album_action" で img をホバーすると、".album-back" div が移動します。ただし、ページ上のすべての「.album-back」div 要素でアニメーションが開始されます。異なるクラスや ID を入力せずに、1 つの要素だけをアニメーション化するにはどうすればよいですか? たぶん、クラスを設定し、現在のアクティブな（ホバーされた）だけにアクションを設定する方法がありますか？どうもありがとう！

4

4 に答える 4

1

id一意である必要がありますclass。代わりに次を使用する必要があります。

<img class="album_action" src="../upload/img/album2.jpg" width="285" height="246" />

$(this)次に、現在の要素をターゲットにするために使用できます。

$(".album_action").hover(function(){
    $(this).prev('.album-back').stop().animate({'margin-left': '150px'}, 400);
}, function(){
    $(this).prev('.album-back').stop().animate({'margin-left': '100px'}, 250);
});
于 2013-05-02T10:06:22.547 に答える
0

1つのページ内の複数の要素の同じ ID は無効な html と呼ばれるため、 を に変更することをお勧めしますid。class

id をクラスに変更してみてください:

$(".album_action").hover(function(){
    $(this).siblings('.album-back').stop().animate({'margin-left': '150px'}, 400);
}, function(){
    $(this).siblings('.album-back').stop().animate({'margin-left': '100px'}, 250);
});

.siblings()ホバーされた要素の同じレベルで見つけるために使用できます。

于 2013-05-02T10:11:01.137 に答える