スライドショーをフェードイン/フェードアウトするためにjQueryサイクルを使用しています。
スライドには背景があり、スライド内の半透明のPNG（タグを使用）です。スライドがフェードインしている間、半透明の領域には黒い斑点があります。スライドが完全にフェードインすると、これらの斑点は消えます。
CSS内でAlphaImageLoaderを使用してこの種のことを回避しましたが、これらを背景画像にすることはできません。
何かご意見は？必要に応じて、デモをセットアップできます。
助けてくれてありがとう！
私はそれを単純化し、ここに例をアップロードしました：
http://dustland.markrichterjr.com/cycle/sample.html
HTML
<ul class="trending-slides">
<li>
<a href="#"><img src="assets/images/home-trending-phones.png" alt="Phones" /></a>
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-tablets.png" alt="Tablets" />
<div class="text">
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-accessories.png" alt="Accessories" />
<div class="text">
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-support.png" alt="Support" />
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
</ul>
CSS
.home-page-content .most-viewed .trending-slides, .home-page-content .most-viewed .trending-slides li {
width:630px;
height:124px;
margin:0;
padding:0;
overflow:hidden;
list-style:none;
background:transparent !important;
}
.home-page-content .most-viewed .trending-slides li {
background:url(../images/bg-home-trending.jpg) no-repeat 100% 0;
}
JavaScript
$('.home-page-content .most-viewed .trending-slides').cycle({
fx: 'fade',
before: function(currSlideElement, nextSlideElement) {},
speedIn: 250,
speedOut: 100,
after: function(currSlideElement, nextSlideElement) {
$('.text', nextSlideElement).show('fade', 125);
$('.text', currSlideElement).hide();
},
sync: false,
timeout: 0,
pagerEvent: 'mouseover',
pager: '.trending-nav',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '.trending-nav li:eq(' + idx + ') a';
},
cleartype: true,
cleartypeNoBg: false
});