当'点击'Jquery时淡入淡出类答案

【问题标题】：Fade class in when 'clicked 'Jquery当'点击'Jquery时淡入淡出类
【发布时间】：2017-06-20 20:26:31
【问题描述】：

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

所以在 CSS 中 display 设置为 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');
  });
});

【问题讨论】：

能否请您编辑您的问题以包含 HTML。此外，如果您使用 CSS 过渡设置动画，则 JS 代码似乎有点多余。
delay() 仅适用于动画功能（淡入淡出、幻灯片、切换）
使用这个 $('.text').fadeIn(1500);而不是延迟

标签： jquery html css

【解决方案1】：

您将 CSS 中的“display”属性设置为“block”。如果您希望文本褪色，则应将其设置为“无”。

试试这个：

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

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

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

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

【讨论】：