jquery - 当 'clicked ' Jquery 中的淡入淡出类

Question

嘿，当我使用“点击”事件时，我正试图在使用 JQuery 时淡化我的“文本”类。我设法做到了，但它是立即出现的，而不是在 1.5 秒后逐渐消失，我哪里出错了？

因此 display 在 CSS 中设置为 none。

$(document).ready(function() {
  $(".top-left").click(function() {
    $(this).css("height", "70vh");
    $("#about").css("top", "-20px");
    $("#about").css("transition", "1s");
    $('.text').delay('15000').css('display', 'block');
  });
});

Answer 1

您正在将 CSS 中的“显示”属性设置为“ block ”。如果你想让你的文字淡出，它应该被设置为“无”。

试试这个:

$('.text')
  .delay(15000)
  .queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
  });

delay() 与动画 (fx) 队列一起使用。通过该机制无法更改 css 属性，因此不受 delay 指令的影响。

您也可以使用“隐藏”。示例:

$('.text')
      .delay(15000)
      .queue( function(next){ 
        $(this).hide(); 
        next(); 
      });