Sliding images inward from different direction

Question

I would like to have the first image slide from left to right. The second image slides from left to right, and the third image will be coming from the bottom to top. I managed to slide the first image from left to right with the answers I found here on stackoverflow. But when I modified the script & css for the other images, they're not sliding. I am not so knowledgeable in javascript.

$(document).ready(function() {
  function animateImgs() {
    $('ul.slide1 li:not(.visible)').first().animate({
      'margin-right': '500px'
    }, 2000, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }
  animateImgs();
});

.content {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
  z-index: 2;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  z-index: 3;
  left: 200px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
  z-index: 4;
  left: 65px;
  top: 235px;
}


/* -------------------------------------------------------------------- */

ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

ul.slide1 li {
  float: right;
  margin: 0 10px 0 0;
  margin-right: 9999px;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
  <ul class="slide1">
    <li>
      <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
    </li>
  </ul>
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
  <ul class="slide3">
    <li>
      <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
    </li>
  </ul>
</div>

Answer 1

Steps:

• Define a container element with class slideContent
• Within container define slide elements with class slide
• Specify sliding direction to slide elements with either slideUp, slideDown, slideLeft or slideRight
• Specify data-margin to place element in container by sliding

Do not define following in CSS (instead use data-margin attribute in slide element):

margin-bottom for slideUp element

margin-top for slideDown element

margin-right for slideLeft element

margin-left for slideRight element

$(document).ready(function() {

  function animateImgs() {
    // Animation duration
    var duration = 200;

    // Get element reference needs to be shown
    var el = $('.slideContent .slide:not(.visible)').first();

    if (el.length === 0) {
      console.log('No more elements found');
      return;
    }

    // Read the margin value
    var marginValue = el.attr('data-margin');

    // Direction
    var marginDirection,
      animationProp = {};

    // Animate now
    if (el.hasClass('slideLeft')) {
      marginDirection = 'margin-right';
    } else if (el.hasClass('slideRight')) {
      marginDirection = 'margin-left';
    } else if (el.hasClass('slideUp')) {
      marginDirection = 'margin-bottom'
    } else if (el.hasClass('slideDown')) {
      marginDirection = 'margin-top'
    }

    if (typeof marginDirection === 'undefined') {
      // No valid animation direction defined
      console.log('Invalid animation direction');
      return;
    }

    animationProp[marginDirection] = marginValue;
    el.animate(animationProp, duration, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }

  animateImgs();

});

.slideContent {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

.slideContent .slide {
  position: absolute;
}

.slideContent .slideLeft {
  right: -100%
}

.slideContent .slideRight {
  left: -100%
}

.slideContent .slideUp {
  bottom: -100%
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
  <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
  <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</div>