2

以下のdivの2つの同じケースがあります。

<div class="box">
  <div class="content">
    Content here
  </div> 
  <div class="info">
    Text here
  </div> 
</div>

.infoはオーバーフローで非表示になります：非表示になり、.boxにカーソルを合わせると、.info .animatesが表示され、.contentに関する情報が含まれます。

しかし、.boxの1つにカーソルを合わせると同じクラス名になるため、両方の.infoが.animatesになります。

私はこの解決策を思いついた

$(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");
    }); 
});

最初にホバーを使用してクラスを追加および削除しようとしましたが、.animateの.hoverと.infoがアニメーション化されない前に、アクティブなクラスが削除されました。

これは良い解決策ですか、それともこれを行うためのより良い、より「正しい」方法がありますか？

4

1 に答える 1

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を得ることができます。

于 2012-05-01T14:52:42.763 に答える