Home/ Questions/Q 6528809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:34:10+00:00

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);

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0