jQuery中的淡入淡出图像 [英] cross-fade images in jQuery
本文介绍了jQuery中的淡入淡出图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在网页上有一张图片,并且在移动jQuery滑块时更改了它:
I have an image on a web page, and have it change when the jQuery slider is moved:
HTML:
<img src="images/flask_image1.png" alt="Isa lab" id="flask" />
滑块HTML:
<div id="slider1">
脚本:
<script>
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('#flask').fadeOut(100);
$('#flask').attr('src','images/flask_image2.png');
$('#flask').fadeIn(100);
}else{
$('#flask').attr('src','images/flask_image1.png');
};
}
});
});
</script>
但是,这样做的作用是图像逐渐淡出,改变,然后在有效"状态下逐渐消失,但是暂时消失了.
However what this does is the image fades out, changes, then fades in which "works" but it momentarily fades to nothing.
有没有一种方法可以淡入淡出2张图像?
Is there a way to cross-fade the 2 images?
推荐答案
here you go, quiet simple I suppose, much less code and difficulty comparing with implementing some plugins: http://jsfiddle.net/gcvqr/2/
HTML
<img src="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png" id="slider">
<button>Change Image</button>
jQuery
var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
if(!stopWorking){
stopWorking=true;
$('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
$('#fadingImg').css({
'position':'absolute',
'width':'400px',
'height':'400px',
'top':'0px',
'left':'0px'
});
if($('#slider').attr('src')==firstSrc){
$('#slider').attr('src',secondSrc);
}
else{
$('#slider').attr('src',firstSrc);
}
$('#fadingImg').fadeOut(1000,function(){
$('#fadingImg').remove();
stopWorking=false;
});
}
});
注意:
为了使其在您的页面中正常工作,您需要给#fadingImg
滑块img设置样式,使其位于页面正上方.
in order to make it work in your page, you need to give #fadingImg
the style of your slider img, to be positioned right over it.
这篇关于jQuery中的淡入淡出图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文