Question

我试图在用户在网站上1分钟后显示文字，并在2秒后离开。

我知道如何让它淡出：

setTimeout(fade_out, 2000);

function fade_out() {
  $("#msg").fadeOut().empty();
}

但我需要帮助才能让它淡入。

我不太了解JS，所以请尝试包含一个例子。

Answer 1

除了代码使用fadeIn()和delay() ::

_{注意:: 在此演示中，我使用短时间，您可以稍后根据需要进行调整}

＆＃13;

setTimeout(fade_in, 2000);

function fade_in() {
  $("#msg").fadeIn().delay(1000).fadeOut();
}

＆＃13;

#msg {
  display:none;
  padding: 50px;
  background: red;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg">ALERT</div>

＆＃13;

Answer 2

Jquery可能是最简单的答案，但您也可以使用纯CSS Animations，而不使用任何JavaScript。

HTML：

<p id="element">P IS SHOWN</p>

CSS：

#element {
  padding: 50px;
  background: red;
  color: white;
}

#element {
    -moz-animation: cssAnimation 64s ease-in;
    /* Firefox */
    -webkit-animation: cssAnimation 64s ease-in;
    /* Safari and Chrome */
    -o-animation: cssAnimation 64s ease-in;
    /* Opera */
    animation: cssAnimation 64s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
  0%   {opacity: 0;display:none;}
  /* 59 sec : start fading in*/
  92%   {opacity: 0;display:block;}
  /* 60 sec : visible */
  94%   {opacity: 1;display:block;}
  /* 62 sec : start fading out */
  97%   {opacity: 1;display:block;}
  /* 63 sec : not visible */
  99%   {opacity: 0;display:block;}
  /* 64 sec */
  100%   {opacity: 0;display:none;}
}

这是一个小提琴（持续时间为6秒）：DEMO

Answer 3

setTimeout(
function() 
{
  $("£msg").fadeIn(200);
  //call the fade out function here
}, 60000);

来源：How to wait 5 seconds with jQuery?

Answer 4

你在正确的轨道上。只需要在淡出之前淡出

//fade in in 6 seconds (change to 60000 for 1 minute)
setTimeout(fade_in, 6000);

//function to fade it in
function fade_in() {
  $("p").fadeIn();

  //in this function we can start to fade out after 2 seconds
  setTimeout(fade_out, 2000);
}

//function to fade out
function fade_out() {
  $("p").fadeOut();
}

例如： https://jsfiddle.net/j0p7dvLn/

Answer 5

要在60秒后淡入文本，然后在2秒后将其淡出，您可以执行以下操作：

var fadeOutText = function () {
    $("#msg").fadeOut(); // select the message and fade it out
};

var fadeInText = function () {
    $("#msg").fadeIn(); // select the message and fade it in

    setTimeout(fadeOutText, 2000); // set the text to fade out in another 2 seconds (2000 ms)
};

setTimeout(fadeInText, 60000); // start the fade in after 60 seconds (60000 ms)

如何使<p>标签在X时出现并在X时消失

5 个答案: