如何在JQuery中向内滑动文本和使文本淡入淡出？

Question

我已经在Google和此处进行过搜索，但无法实现任何提示。我一点都不擅长JS。我想做的是，当您将鼠标悬停在div上时，在向上浮动时淡入一行文本，而当您停止悬停时，则倒退一遍。

我无法同时使用幻灯片和淡入淡出效果。

这是我使用JQuery 2.3.1的代码

$(function() {
  // DOM ready

  $('#card1').hover(
    function() {
      $('#artist1').slideDown();
    },
    function() {
      $('#artist1').slideUp();
    });

});

#artist1 {
  position: absolute;
  top: 100px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;">
  <h4 id="artist1" class="artistname ">testname</h4>
</div>

Answer 1

查看样式和标签的更改：

Email.includes(:booking).sent_between(start_date, end_date).references(:booking).group(:email_type).sum(:booking_total) 

$(function() {
  var slideDuration = 300;
  $('#card1').hover(
      function() {
        $('#artist1').stop(true, true)
          .fadeIn({ duration: slideDuration*3, queue: false })
          .css('display', 'none').slideDown(slideDuration);
      },
      function() {
        $('#artist1').stop(true, true)
          .fadeOut({ duration: slideDuration*1.5, queue: false })
          .slideUp(slideDuration*3);
      }
   )
});

#artist1 {
  position: relative;
  top: -10px;
  display: none;
}