如何淡出JS中的图像？
[英]How do I fade out images in 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>
我只是不确定在淡入下一个图像之前如何使图像淡出。
提前致谢
4 个解决方案
解决方案1
2 2016-07-21 11:26:18
只需删除切换，然后执行淡出回调函数中的下一个操作即可：
这是解决方案
$(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>
解决方案2
1 2016-07-21 11:27:40
前一个不会消失
在您的代码中：
$('#slideshow > div:first')
.toggle()
.fadeOut(1500)
综观文档- http://api.jquery.com/toggle/ -你是隐藏它，然后才fadeOut （一种无形的元素）
解决方案3
1 已采纳 2016-07-21 11:40:02
首先，有多个具有相同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>
解决方案4
0 2016-07-21 11:23:28
<html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
在div上设置图片，以便淡出它
如何随机选择三个图像，然后用新图像将它们淡出？
[英]How do I select three images at random and then fade them out with a new image?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.