Question

我需要的是当动画移动到前0，fadeIn正在运行时，它也是当动画移出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");
    })

这是工作的代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你们可以帮助我在页面的中心（宽度）设置div音符，那么我将使用js计算然后将其设置在中心

Answer 1

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

将其设置为false会有什么作用？

而不是queuing the fadeIn，而removes it from the chain of the functions in the queue和runs it along的任何功能都位于队列的顶部，即下面的示例animate()。

要使div note居中，因为您有already set its position to fixed，所以您可以使用left set to 50% and translate X axis to -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函数，我们使用不透明度和top来为内容设置动画。
您必须将initial opacity of #note div设置为'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>

Answer 2

要使框水平居中，请使用此css代码段

#note {
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
}

工作小提琴https://jsfiddle.net/7f49tqvr/

Jquery Animate + fadeInOut元素

2 个答案: