如何在JS中淡出图像？
我正在尝试使用fadeIn和fadeOut方法使用JS创建幻灯片。 问题是下一张图像会淡入，但前一张图像不会淡出。
我想在JS代码中切换位置样式，因此当网站加载容器时会接受里面的内容并且可以适当缩放。
我创建了一个切换位置样式的函数。
这是我到目前为止：
$(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>首先，有多个具有相同ID的元素是不好的。
其次，为了达到淡入淡出的效果，您必须将图像置于彼此之上并移除toggle（）函数：https://jsfiddle.net/0rxqbuu5/
这是你的目标吗？
$(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>只要删除切换，并执行淡出回调函数内的下一个东西：
这里是解决方案
$(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>前一个不会淡出
在你的代码中：
$('#slideshow > div:first')
.toggle()
.fadeOut(1500)
看看文档 - http://api.jquery.com/toggle/ - 你隐藏它，然后只有fadeOut （在一个不可见的元素上）