fade in first slide
Ive got the following code...
$(document).ready(function() {
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(3000,function(){
if($(this).next('li.slide').size()){
开发者_运维问答 $(this).next().fadeIn(3000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(3000);
}
});
},10000);
How do I fade in the first slide?
HTML:
<body>
<ul id="testimonials">
<li class="slide">
<blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>2-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>3-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
</ul>
</body>
This jQuery:
$(document).ready(function() {
$('#firstSlide').fadeIn();
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(3000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(3000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(3000);
}
});
},10000);
});
And this HTML:
<body>
<ul id="testimonials">
<li class="slide" id="firstSlide" style="display:none;">
<blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>2-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>3-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
</ul>
</body>
You can see a working example in this jsFiddle: http://jsfiddle.net/bznPA/
加载中,请稍侯......
精彩评论