[英]cross-fade images in jQuery
我在網頁上有圖像,並且在移動jQuery滑塊時更改了圖像:
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>
但是,這樣做是使圖像逐漸淡出,改變,然后在“起作用”的條件下逐漸淡出,但暫時消失為零。
有沒有辦法淡化兩個圖像?
到這里,我想安靜的簡單,與實現某些插件相比,代碼和難度要少得多: 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;
});
}
});
注意:
為了使其在您的頁面中正常工作,您需要為滑塊img賦予#fadingImg
樣式,使其位於其上方。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.