CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Peterssoen
Peterssoen

Reputation: 167

Create smooth jQuery fadeIn and fadeOut of images

Im trying to run the exact same script and css that i use from my perfectly working image fade carousel mobile version. But on desktop as you can see from the snippet there is no fadeOut from what i can see. It just blink and show the background color and fades the next image in. I would like help to make this a smooth fade without any glitch or anything.

$.fn.slider = function() {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index;

    $this.find('li:gt(0)').hide();
    setInterval(function() {
        $this.find('li:first-child').fadeOut(3000)
          .next('li').fadeIn(3000)
          .end().appendTo($this);
        var index = $this.find('li:first-child').data('index');
        $controls.find('li.active').removeClass('active');
        $controls.find('li').eq(index).addClass('active');
      },
      4000);
  };


  $('#slider2').slider();
#slider2 {
  position: absolute;
  background-color: #5A6D77;
  padding: 0;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}

#slider2 img {
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}
.images-list>li {
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
  -webkit-transform: translate3d(0, 0, 0);
  margin: 0;
}
ul {
  list-style: none;
  position: absolute;
  margin: 0;
  padding: 0;
}

.images-list {
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
            <li data-index="0"><img src="https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="1"><img src="https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="2"><img src="https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="3"><img src="https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
          </ul>

Upvotes: 0

Views: 634

Answers (1)

Nico Westerdale
Nico Westerdale

Reputation: 2186

The reason why the animation pops back to the background on each transition is that the LI tags are positioned one after another, they need to be one on top of each other with position:absolute set on the LI.

I also noticed that you have background-size: cover, which only applies to a background-image CSS style, and not an IMG tag inside the LI tag.

I've modified the HTML to use a background-image, so the scaling works better.

No changes to the Javascript.

$.fn.slider = function() {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index;

    $this.find('li:gt(0)').hide();
    setInterval(function() {
        $this.find('li:first-child').fadeOut(3000)
          .next('li').fadeIn(3000)
          .end().appendTo($this);
        var index = $this.find('li:first-child').data('index');
        $controls.find('li.active').removeClass('active');
        $controls.find('li').eq(index).addClass('active');
      },
      4000);
  };


  $('#slider2').slider();
#slider2 {
  position: absolute;
  background-color: #5A6D77;
  padding: 0;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}

.images-list>li {
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background-size: cover;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
  -webkit-transform: translate3d(0, 0, 0);
  margin: 0;
}
ul {
  list-style: none;
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
        <li data-index="0" style="background-image: url(https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"</li>
        <li data-index="1" style="background-image: url(https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
        <li data-index="2" style="background-image: url(https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
        <li data-index="3" style="background-image: url(https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
      </ul>

Upvotes: 1

Related Questions