我正在尝试通过 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>
如何让图像在淡出下一张之前淡出?
最佳答案
只需移除切换并在 fadeout 回调函数中执行接下来的操作:
解决办法
$(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>
关于javascript - 如何在 JS 中淡出图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38502833/