CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ImmaGrumpyOldMan
ImmaGrumpyOldMan

Reputation: 59

Simple jQuery Slideshow Transitioning Between Slides

I have made a slideshow using jQuery, and everything is working as expected... except for transitions. As of right now, the slideshow goes through my divs and adds/removes imgs, until the end of slideshow (at which point, the slideshow "disappears"). This is all good. However, I wish to make the transition effect less jarring. This is what I have so far.

HTML:

<div class="slideShow" id="slideshow">
<div class="showImg">
    <img src="http://paulmarique.be/dropbox/img/01.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/02.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/03.jpg" alt="" />
</div>

CSS:

 body {
  background-color: #e7e7e7;
  text-align: center;
}

.slideShow > div:not(.showImg) {
  display: none;
}

.showImg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.slideShow {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

jQuery:

   $(function() {
     setTimeout(playSlideShow, 3000);

     function playSlideShow() {
       $('.showImg').removeClass('showImg').next('div').addClass('showImg');
   setTimeout(playSlideShow, 3000);
  }
 });

Codepen: http://codepen.io/anon/pen/vGYKrO

It doesn't transition at all. I don't understand what I'm doing wrong, but I'm sure somebody will point out a silly error on my part very quickly. Any help would be greatly appreciated.

*Note: I should add that I do not want to use any plugin for this.

Upvotes: 0

Views: 40

Answers (1)

Jasper
Jasper

Reputation: 76003

Two things:

  1. The CSS display property cannot be transitioned, it either is or is not. You can however transition the visibility property along with opacity (for example) to get a nice transition effect. Hint: The transition declaration for visibility will have a duration of 0ms and a different delay depending on the state of the element.
  2. You are changing the CSS properties (via changes a class on your elements) of the .showImg element(s) but you added the transition declaration to the .slideshow element. You must apply the transition property to the element that is having its CSS changed.

Upvotes: 1

Related Questions