Question

我有两个相同的div案例。

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

.info隐藏了溢出：隐藏，当我将鼠标悬停在.box上时，.info。动画并包含一些有关.content的信息。

但是当我将鼠标悬停在其中一个.box，.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");
    }); 
});

我首先尝试使用悬停来添加和删除类，但是在.anover上的.hover和.info没有动画下来之前，活动类被删除了。

这是一个很好的解决方案，还是有更好，更正确的方法来做到这一点？

Answer 1

你应该能够沿着这些方向做点什么。

$('.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作为例子。

JQuery将活动类添加到同名的类中

1 个答案: