Question

我想用jquery制作4个动画。其中3个将在同一时间发生，其中一个将在其他人完成后发生。但我的代码不起作用

<script>
$(document).ready(function(){
$("#div1").fadeIn(5000);
$("#div2").fadeIn(3000);
$("#div3").fadeIn(1500, function(){
$("h3").animate({left: '50%'},3000);
});
});
</script>

Answer 1

我遇到的问题是h3显示：隐藏，它使div的内部变空，因此没有显示任何内容。 Animate没有帮助，因为它没有改变它显示：阻止。

要使fadeIn正常工作，您需要在项目中包含jQuery UI。 https://jqueryui.com/

不确定为什么我被拒绝投票给我答案。但是已经更新了代码以便在所有运行之后移动标题。

＆＃13;

$(document).ready(function() {
  $("#div1").fadeIn(5000, function() {
    $("h3").animate({ "left": "50%" }, 3000);
  });
  $("#div2").fadeIn(3000);
  $("#div3").fadeIn(1500);
});

＆＃13;

h3 {position:absolute; }

#div1, #div2, #div3 {
display:none;
position:relative;
height:50px;
}

#div1 { background-color: red; width:100%; }
#div2 { background-color: green; width:100%; }
#div3 { background-color: blue; width:100%; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<div id="div1"><h3>Wow heading</h3></div>
<div id="div2"><h3>Another heading</h3></div>
<div id="div3"><h3>Last heading</h3></div>

＆＃13;

动画在jquery中一个接一个

1 个答案: