如何在JQuery中滑入和淡出文本?

问题描述 投票:1回答:1

我在谷歌和这里搜索过但未能实现任何提示。我根本不擅长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>
javascript jquery
1个回答
0
投票

查看样式和标签的更改:

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.