2

我在下面有两个相同的 div 案例。

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

.info 被 overflow: hidden 隐藏，当我将鼠标悬停在 .box 上时，.info .animates 向上并包含一些关于 .content 的信息。

但是，由于当我将鼠标悬停在其中一个 .box 上时，我具有相同的类名，因此它们两个 .animates 上的 .info。

我想出了这个解决方案

$(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

You should be able to do something along these lines.

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

If you give us your css, I could get a working jsfiddle as an example.

于 2012-05-01T14:52:42.763 回答