jQuery淡化两个没有白色的图像 [英] jQuery fading two images without white
问题描述
我想在没有白色转移的情况下淡化图像。
I would like to fade image without white transfer between them.
HTML:
<div class="image">
<span><img src="1.jpg"></span>
</div>
jQuery:
$('.image > span > img').fadeOut(1000, function() {
$('.image > span > img').attr('src', images[i]);
$(this).fadeIn(1000);
});
这有效,但改变之间有白色淡入淡出。图像数组包含图像源。
我发现这个 http://jsfiddle.net/byB6L/ 但是我无法更新我的代码使用它。
This works, but there is white fade between changing. Images array contains image sources. I found this http://jsfiddle.net/byB6L/ but I can not update my code to work with that.
推荐答案
这是因为你在动画端回调中使用相同的图像。
This is because your using the same image on the animation end callback.
我的建议:在 class =image上使用
容器,将图像元素设置为 position:
position:absolute;
,现在在淡出图像后,将新图像插入容器并淡入其中并删除第一个图像。
My suggestion: use position: relative;
on the class="image"
container, put the image element as position:absolute;
, now after you are fading the image out insert a new image into the container and fade it in and remove the first image.
示例:
Html:
<div class="image">
<span><img src="1.jpg"></span>
</div>
Css:
<style type="text/css">
.image{position:relative;}
.image span img{position:absolute;top:0;left:0;}
</style>
JavaScript:
JavaScript:
<script type="text/javascript">
$('.image > span > img').fadeOut(1000);
var $image = $('<img alt="" src="YOUR NEW IMAGE_PATH" style="opacity:0;" />');
$('.image > span').append($image);
$image.fadeIn(1000, function(){
$('.image > span > img').first().remove();
});
</script>
这篇关于jQuery淡化两个没有白色的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!