jQuery切换延迟幻灯片动画无法呈现

Question

创建了一个包含多层事实按钮的页面视图。因此，下面列出的是特征：

1. 当用户首次进入该页面时，将显示主图像。

2. 稍微延迟1.5秒后，第二层事实气泡图像将滑入以占据主图像周围的区域

3. 再经过1.5秒的延迟后，最后一层气泡图像会滑入，占据第二层周围最远的区域。

问题：

使用了切换jQuery API，以帮助渲染特征2和特征3的效果。

但是，在延迟上述延迟时间后，图像才会显示而不是动画效果。

出了什么问题，请帮忙。 感谢

代码：

＆＃13;
＆＃13;
var BubbleSlide = 3000;

function MisisonofEnvironmentalProtection() {
  $('#Button7').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });

  //SecondLayer
  $('#RecyclingPoints').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#MonthlyRecycling').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#EcoAwareness').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#Carbon').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#GreenLifestyle').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#EcoActivities').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#CleanGreen').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#EcoTalk').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#Social').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#Recyclables').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#SavingTrees').toggle("slide", {
    duration: BubbleSlide
  }, 2000);
  $('#Planting').toggle("slide", {
    duration: BubbleSlide
  }, 2000);

  //Third Layer
  $('#RecycleIslandWide').toggle("slide", {
    duration: BubbleSlide
  }, 10000);
  $('#RecyclingDay').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#Wood').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#Schools').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#Earth').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#EcoUtensils').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#Participation').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#CharityFunds').toggle("slide", {
    duration: BubbleSlide
  }, 5000);
  $('#Trees').toggle("slide", {
    duration: BubbleSlide
  }, 5000);


}
＆＃13;
<div id="Environment_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">

  <img id="Main" src="lib/img/EnvironmentalProtection/Page01/Main.png" />

  <img id="RecyclingPoints" src="lib/img/EnvironmentalProtection/Page01/RecyclingPoints.png" />
  <button id="RecycleIslandWide" onclick="RecycleIslandWide()">
    <img src="lib/img/EnvironmentalProtection/Page01/islandwide.png">
  </button>
  <img id="MonthlyRecycling" src="lib/img/EnvironmentalProtection/Page01/MonthlyCommunity.png" />
  <img id="RecyclingDay" src="lib/img/EnvironmentalProtection/Page01/RecyclingDay.png" />


  <img id="EcoAwareness" src="lib/img/EnvironmentalProtection/Page01/EcoAwarness.png" />
  <img id="Woods" src="lib/img/EnvironmentalProtection/Page01/Woods.png" />
  <img id="Schools" src="lib/img/EnvironmentalProtection/Page01/Schools.png" />
  <!--....Other Buttons....-->
</div>
＆＃13;
＆＃13;
＆＃13;