jquery - 如何使用 slidedown 和 slide up jquery

Question

我想在鼠标悬停时在下拉菜单中显示一个汽车信息类...相反，当鼠标移开时让它向上滑动。 我如何在 jquery 中执行此操作？

 $(".items .title-bar").on("mouseover",this, function () {
        //how use car-info slide down
  });
  $(".items .title-bar").on("mouseout",this, function () {
        //i wanted  .title-bar and .car-info .. mouseout event and .car-info is slideup

});

在 mouseover 之前

使用鼠标悬停

//看我的jfiddle http://jsfiddle.net/kisspa/es3gx/

Answer 1

首先你应该包括 jQuery 库，然后有几个错误(JS 和 CSS)。

看这里:

$(".items .title-bar").on("mouseover", function () {
        $(this).closest(".items").find(".car-info").slideDown(); //@Vedant Terkar edit
});
$(".items .title-bar").on("mouseout", function () {
        $(this).closest(".items").find(".car-info").slideUp();   //@Vedant Terkar edit
});

并且在 CSS 中，您应该删除 z-index，并使用 display 属性隐藏框:

.car-info{
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 15px 10px;
    text-align: justify;
    display: none;    
}

fiddle 演示在这里:http://jsfiddle.net/es3gx/5/