将一个图像淡入另一个图像。
[英]Fade one image into another.
问题描述
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there 
我正在尝试制作一个jQuery脚本，其中1.jpg淡出，2.jpg淡入但我只看到1.jpg并且它停留在那里
3 个解决方案
解决方案1
2 2014-01-14 20:27:46
Try something like this: 尝试这样的事情：
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image. 这将淡出原始图像，一旦淡入淡出完成，更改图像的src属性，然后开始淡入新图像。
解决方案2
0 2014-01-14 20:27:39
According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? 根据你所说的..如果我理解正确...虽然我可能会弄错，但似乎你要求1淡出......改为2 ......并且淡入2？ If so, will this not work? 如果是这样，这不起作用吗？
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ... 这是简单的版本，当然我会假设它会被放在.on()事件之类的函数中等等......
解决方案3
0 已采纳 2014-01-14 20:31:13
This will work for however many images you add. 这适用于您添加的许多图像。 As long as they have the class slideshow . 只要他们有类slideshow 。
Also this allows you to crossfade images. 这也允许您交叉淡化图像。 See below for non-crossfade below. 请参阅下面的非交叉淡化。
See this Fiddle. 看到这个小提琴。
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade 非交叉淡入淡出
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE UPDATE
You can add the following css to get the images to display in the same space. 您可以添加以下css以使图像显示在同一空间中。
.slideshow { position:absolute; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.