Easier way to do the following

Question

I have made a script which slides thought some customers quotes. See code below

<script>

jQuery(document).ready(function () {
  jQuery(".da-feedback .da-quote").hide();
  jQuery(".da-feedback .da-quote:first-child").show();
  setTimeout('NextItem(1)',6000);
});

function NextItem($n) {

 jQuery('.da-feedback .da-quote:nth-child('+$n+')').slideUp('slow');
 $n = $n + 1;
 jQuery('.da-feedback .da-quote:nth-child('+$n+')').slideDown('slow');
 setTimeout('NextItem('+$n+')',6000);
}

</script>

<div class="da-feedback">
   <div class="da-quote" style="display: none; ">....</div>
   <div class="da-quote" style="display: none; ">....</div>
   <div class="da-quote" style="display: none; ">....</div>
</div>

I would like to know if jquerys gives you a function to make this easier.

Answer 1

Have you looked into .delay() ?

function NextItem(n) {
    $('.da-feedback .da-quote:nth-child('+$n+')').slideUp('slow')
        .delay(6000).slideDown('slow', NextItem(n++)); 
    // callback fires upon completion
};
NextItem(1);

Incidentally, it doesn't actually affect anything, but with JavaScript you don't need to start your variables with a $, and with jQuery it's considered a convention to do so if and only if the variable is a jQuery object.

Answer 2

Check out jQuery toggle () and jQuery next () and prev () methods.

Ohw...and maybe slideToggle () might also be of service for you.