Skip to content
Advertisement

Class two time repeating in Jquery

Here is slideshow of three images, which is have fadeIn and fadeOut effect on every image, but when i add one new css animation effect fadeInLeft to middle image then it repeats two time, why ?

But if i remove fadeInLeft class to middle image then all three image comes one by one correctly, i need to add fadeInLeft effect but after that middle image not should be repeat again. What mistake am making, can i know plz.

my code is:

$(document).ready(function() {
    var timer;
    $(".slideshow2 > div:gt(0)").hide();
    $(".slideshow2")
        .mouseenter(function() {
            if (timer) { clearInterval(timer) }
        })
        .mouseleave(function() {
        var delay = document.getElementById("rrrr").value;
            timer = setInterval(function() {
                $(".slideshow2 > div:first")
                    .fadeOut(500)
                    .next()
                    .fadeIn(500)
                    .end()
                    .appendTo(".slideshow2");
            }, delay);
        })
        .mouseleave();   
});
.slideshow2 { position:relative;  height:332px; width:500px; overflow:hidden; }
.slideshow2 div{ position:absolute; }

img {
width: 100%;
height: 100%;

}

.fadeInLeft {
    animation: fadeInLeft 1000ms both;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<input type="text" id="rrrr" value="2000" placeholder="2500 is 2.5s" style="width:50">

<div class="slideshow2">
  <div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
  <div class="fadeInLeft"> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
  <div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
  
  </div>

Advertisement

Answer

You “absolutely” need to know which image is showing when… When dealing with “absolutely” positionned images. (did you notice the play on words? .oO(lol)). So I added a data-number attribute on each divs just to be able to clearly view what happens with them during the animation. There is no other use to that beyond debugging.

Additionnaly… Instead of having everything chained, define some meaningful variable names, so you can clearly read what you are coding.

So you will notice that the image “on top” (the first in the current markup at any time) is the one that is visible and fades out. Then, the slide in animation is done on class addition. You need to remove and add it again to have it “done” by CSS… And that needs to be done on the image “next image” (the second in the div stack) while the image “on the top” is fading out.

I suggest a fadeout time a bit longer than the slide in time for a “nice” effect.

In order, here is what happens at every interval iteration:

  1. Define the elements in some variables, so it’s clear what you apply on which element.
  2. Remove the fadeInLeft class on all images.
  3. Add the fadeInLeft on the second image (so the animation starts right away). The chained .show() enact immediately to ensure it is visible.
  4. Start fading out the first div immediately… And when it is totally faded out, move it to the end of the div stack. Notice that is done using the .fadeOut() “complete” callback.

$(document).ready(function() {
  var timer;
  $(".slideshow2 > div:gt(0)").hide();
  $(".slideshow2")
    .mouseenter(function() {
      if (timer) {
        clearInterval(timer)
      }
    })
    .mouseleave(function() {
      var delay = document.getElementById("rrrr").value;
      timer = setInterval(function() {

        // Define some meaningful variable names
        let allDivs = $(".slideshow2 > div")
        let firstDiv = allDivs.eq(0)
        let nextDiv = allDivs.eq(1)

        allDivs
          .removeClass("fadeInLeft")

        nextDiv
          .addClass("fadeInLeft")
          .show()

        firstDiv
          .fadeOut(1200, function() {
            firstDiv
              .appendTo(".slideshow2");
          })

      }, delay);
    })
    .mouseleave();
});
.slideshow2 {
  position: relative;
  height: 332px;
  width: 500px;
  overflow: hidden;
}

.slideshow2 div {
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
}

.fadeInLeft {
  animation: fadeInLeft 1000ms both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<input type="text" id="rrrr" value="2000" placeholder="2500 is 2.5s" style="width:50">

<div class="slideshow2">
  <div data-number="1"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
  <div data-number="2"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
  <div data-number="3"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>

</div>
Advertisement