Я использую цикл jQuery для затухания ввода / вывода слайд-шоу.
Мои слайды имеют фон, и они являются полупрозрачными PNG (используя тег) внутри моих слайдов. Пока слайд постепенно исчезает, полупрозрачные области имеют черные пятна. Эти пятна исчезают после того, как слайд полностью исчез.
Я сталкивался с подобными вещами, используя AlphaImageLoader в CSS, но это не могут быть фоновые изображения.
Есть мысли? При необходимости я могу настроить демо.
Заранее спасибо за любую помощь!
Я упростил это и загрузил пример здесь:
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
});