jquery 改变css不生效问题

Question

《a href="#" class="aaa"》
    <span>讲文明树新风公益广告</span>
    <div class="bbb">
       <div class="ccc">
           <p>美丽浙江 文明相伴</p>
       </div>
    </div>
《/a》

代码如下，

    $(".aaa").mouseover(function() {
      if (!$(".bbb").is(":animated")){
        $(".bbb").fadeIn(420).find("div").animate({
            "opacity": "show",
            "margin-top": 0
          }, 800);
      }
    })

    $(".aaa").mouseleave(function() {
      $(".bbb").fadeOut(400);
      $(".bbb").find("div").css({
            "margin-top": "120px",
            "opacity": "hide"
          })
    })
    
    
    主要就是mouseleave事件下，看着源代码，鼠标移走时.bbb的margin-top时而生效，
    时而不生效。很是奇怪。不知道有没有朋友也遇到过这种情况，造成这种情况的原因是什么。
    
    

Answer 1

mouseover一般和mouseout一起用，mouseenter和mouseleave。
区别是mouseover和mouseout事件冒泡，mouseenter和mouseleave不冒泡。
冒泡的意思是… 子元素上发生的事件会传递到父元素 再到爷爷元素…一直传到document 。

大概就是这样，更详细的解释可以自己去查文档

Answer 2

opacity属性啥时候有show和hide这俩值了？

---

评论中题主说可以这样写，但我仍然觉得即便这个能写，性能也不会太好……

补充了段CSS，类似的案例我一般是直接写样式解决的：

.aaa>.bbb {
    display: none;
    transition: all .4s;
}
.aaa>.bbb>div {
    margin-top: 120px;
    opacity: 0;
    transition: all .8s;
}
.aaa:hover>.bbb {
    display: block;
}
.aaa:hover>.bbb>div {
    margin-top: 0;
    opacity: 1;
}