How do I fade out images in JS?

I am trying create a slideshow using JS with the fadeIn and fadeOut methods. The issue is that the next image will fade in but the previous one will not fade out.

I want to toggle the position style in the JS code so when the website loads the containers will accept the content inside and will scale appropriately.

I have created a function to toggle the position style.

Here is what I have got so far:

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function toggle() {
    document.getElementById("img").style.position = "absolute";
  }

  setInterval(function() {
    $('#slideshow > div:first')
      .toggle()
      .fadeOut(1500)
      .next()
      .fadeIn(1500)
      .end()
      .appendTo('#slideshow');
  }, 5000);
});

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

<div id="slideshow">
  <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div>
  <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

---

First of all, it's not ok to have several elements with the same ID.

Secondly, in order to have a cross-fade effect, you must position the images on top of each other and remove the toggle() function: https://jsfiddle.net/0rxqbuu5/

Is that what you were aiming for?

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function myToggle() {
    $(".center-img").css("position","absolute");
  }

  setInterval(function() {
$('#slideshow > div:first')
  .fadeOut(1500,function(){myToggle()})
  .next()
  .css("z-index",100)
  .fadeIn(1500)
  .end()
  .appendTo('#slideshow');
  }, 5000);
});

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.slideshow_div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}
.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="slideshow_div"> <img class="center-img" src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg"> </div>
  <div class="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

---

Just remove toggle and do the next stuff inside fadeout callback function :

here is the solution

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function toggle() {
    document.getElementById("img").style.position = "absolute";
  }

  setInterval(function() {
    $('#slideshow > div:first')
      .fadeOut(1500,function() {
          // Animation complete.
          $(this).next().fadeIn(1500)
          .end()
          .appendTo('#slideshow');
      })
  }, 5000);
});

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

<div id="slideshow">
  <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div>
  <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

---

the previous one will not fade out

In your code:

$('#slideshow > div:first')
  .toggle()
  .fadeOut(1500)

Looking at the docs - http://api.jquery.com/toggle/ - you are hiding it and only then fadeOut (on an invisible element)

链接地址: http://www.djcxy.com/p/64764.html

上一篇: 如何加快淡出/淡出

下一篇: 如何在JS中淡出图像？