jQuery toggle delay slide animation is unable to render

Question

Have created a page view with multiple layer of facts button. Hence as itemised below are the features:

1. When user first enters the page, the main image will show.

2. after a slight delay of 1.5s, the second layer of fact bubble image will slide in to occupy the area around the main image

3. after a further delay of another 1.5s, the last layer of fact bubble image will slide in to occupy the furthest area around the second the layer.

Issue:

Have made use of toggle jQuery API, to help to render effects on feature 2 and feature 3.

However, after a delay of the mentioned delay period, the image just appear instead of the animated effect.

what has gone wrong and please help. Thanks

Code:

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


}

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