javascript - Jquery Animate + fadeInOut 元素

Question

我需要的是当 animate 移动到顶部 0 时，fadeIn 正在运行，当 animate 移出 fadeOut 也在运行时

谁能帮我解决这个问题？

这是我的代码，但不起作用:

代码不起作用示例 1

$("#note").fadeIn(2000).animate({ top:"0" }).delay(4000).animate({ top:"-200" }).fadeOut(2000);

代码不起作用示例 2

$("#note").fadeIn(2000, function () 
    {
        $("#note").animate(top,"0px");
    }).delay(4000).fadeOut(2000, function () 
    {
        $("#note").animate(top,"-200px");
    })

这是有效的代码

$("#note").animate({ top:"0" }).delay(4000).animate({ top:"-200" }); // this is working 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center" style="position:fixed; z-index:2; background-color:rgba(255,102,102,1); width:80%; max-width:400px; top:-200px;">
	<b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

如果你们能帮我在页面中心(宽度)设置div注释那就更好了，否则我会使用js计算然后将其设置在中心

Answer 1

您需要在尝试 fadeIn 时使用 {queue: false} 属性，使其与下一个链式函数(即 animate())同步运行并设置 display:none 到#note div。

将其设置为 false 有何作用？

它不是对 fadeIn 进行排队，而是将其从队列中的函数链中删除，并使用任意函数一起运行现在位于队列顶部，即下面示例中的 animate()。

要将 div 居中注意，由于您已已将其位置设置为固定，因此您只需使用 left 设置为 50% 并平移 X轴到 -50% 如图所示。

第一种选择:

$("#note").fadeIn({queue: false, duration: 'slow'}).animate({ top: "0px",opacity:"1"}, 'slow').delay(1000).animate({ top: "-20px",opacity:"0"}, 'slow').fadeOut();

#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  display: none;
  transform:translateX(-50%);
  top:-20px;
  left:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

第二种选择:

• 您无需将 display:none 设置为 #note div。
• 您不必使用 fadeIn 或 fadeOut 函数，我们使用 opacity 和 top 来为内容添加动画效果。
• 您必须将#note的初始不透明度设置为“0”。

$("#note").animate({ top: "0px",opacity:"1" }, 'slow').delay(1000).animate({ top: "-30px",opacity:"0"}, 'slow');

#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  transform:translateX(-50%);
  top:-30px;
  left:50%;
  opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

第三种选择:根本不使用 Jquery，而是在 CSS 中使用动画

#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  transform:translateX(-50%);
  top:-30px;
  left:50%;
  opacity:0;
  animation: effect 4s linear forwards;
}

@keyframes effect {
    10%  {top:0px; opacity:1;}
    70%  {top:0px; opacity:1;}
    80% {top:-30px;opacity:0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>