私は下のdivの2つの同一のケースを持っています。隠されたと私は.animatesの.info、■は上にカーソルを移動し、.contentに関するいくつかの情報が含まれている場合:同じ名前のクラスにアクティブなクラスを追加するJQuery
<div class="box">
<div class="content">
Content here
</div>
<div class="info">
Text here
</div>
</div>
の.infoは、オーバーフローで隠されています。
しかし、.boxのどちらかにカーソルを合わせると、同じクラス名を持つので、両方の.animatesで.info。私が追加したクラスを削除するには最初のホバーを使用しようとしましたが、その後、アクティブクラスはアニメーション化しませんでした.animateとの.info上.hover前に除去してしまった
$(document).ready(function(){
$('.box').mouseover(function(){
$(this).find(".info").addClass("active");
});
$('.box').hover(function(){
$('.active').animate({bottom: "0px"}, {queue: false, duration: 100})
}, function(){
$('.active').animate({bottom: "-50px"}, {queue: false, duration: 100});
});
$('.box').mouseout(function(){
$(this).find(".info").removeClass("active");
});
});
私はこの解決策を考え出しましたダウン。
これは良い解決策ですか、これを行う「改善する」方法がありますか?
あなたは、すべてが同じクラス名を持っているので、そのクラス名ですべての要素をアニメーション化しましたが、実際にはすでに解決策が見つかりました。特定の '.info 'クラスに' active'クラスを追加する方法を考え出しました'hboxの' .box'要素の要素です。クラスを追加するのではなく、その要素をアニメーション化するだけで($(this).find( '。info')。animate(...) ')できます。 –