时间戳

首页 > 解决方案 > 如何使用 JavaScript 和/或 JQuery 为滑动和淡入淡出的文本设置动画？

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

问题描述

我在谷歌和这里搜索过，但无法实施任何提示。我根本不擅长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>

标签： javascriptjquery

解决方案

查看样式和标签的更改：

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

推荐阅读