当我点击链接时,我试图在图像中淡入淡出,但每次淡入时都会"眨眼"。有没有什么办法可以避免眨眼,来一次干净的时尚?
这是我当前的代码:
function changeMortar(mortar) {
var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'
$("#fuge-color").hide().html(html).fadeIn('slow');
}
我举了这个例子http://jsfiddle.net/BHCam/14/
它逐渐变白,然后变成我选择的研钵。我想要的是我选择的砂浆,在旧砂浆上褪色。
闪烁和其他类似的工件可能是由浏览器或图形卡驱动程序引起的,因此除了检查图形设置、调整或升级机器组件外,您没有什么可做的。你的榜样在这里慢慢消失了。
我对您的代码进行了一些更改。在HTML:中这样尝试
<div id="slideshow">
<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/>
<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" />
</div>
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>
在CSS中:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
JavaScript代码:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
在这里你可以找到更多信息。下面是JsFiddle中的运行示例。
只需将其更改为
$("#fuge-color").hide().fadeIn('slow'); //use slow,fast,1000,2000,3000
选择您的最佳结果
你能试试animate
:吗
function changeMortar(mortar) {
var $html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'
$("#fuge-color").animate({ opacity: 0.8 }, 'fast', function(){
$(this).html($html).animate({ opacity: 1 }, 'fast');
});
}