如何使用 JavaScript 和/或 JQuery 为滑动和淡入淡出的文本设置动画？

Question

我在 google 和 here 上进行了搜索，但无法实施任何提示。我根本不擅长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

查看样式和标签的变化：

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

<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;"></div>
<h4 id="artist1" class="artistname ">testname</h4>