2012-05-01 30 views
2

私は下の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"); 
    }); 
}); 

私はこの解決策を考え出しましたダウン。

これは良い解決策ですか、これを行う「改善する」方法がありますか?

+0

あなたは、すべてが同じクラス名を持っているので、そのクラス名ですべての要素をアニメーション化しましたが、実際にはすでに解決策が見つかりました。特定の '.info 'クラスに' active'クラスを追加する方法を考え出しました'hboxの' .box'要素の要素です。クラスを追加するのではなく、その要素をアニメーション化するだけで($(this).find( '。info')。animate(...) ')できます。 –

答えて

0

これらの行に沿って何かできるはずです。

$('.box').hover(function(){ 
    $(this).find('.info').animate({bottom: "0px"}, {queue: false, duration: 100}) 
}, function(){ 
    $(this).find('.info').animate({bottom: "-50px"}, {queue: false, duration: 100}); 
}); 

私たちにあなたのCSSを渡すと、私は例としてjsfiddleを得ることができました。

+0

これはうまくいきました – potetlotto

+0

あなたの歓迎! :) –

関連する問題