Question

I want to create a slider with jquery animate and I can’t think of how to rotate and animate the next elements here is my HTML

 <div id="slider">
      <a href="http://somthing/" target="_blank">
        <img src="http://something/logosponso.jpg" title="Another" />
      </a>
      <a href="http://somthing2/" target="_blank">
        <img src="http://something/logosponso2.jpg" title="Another" />
      </a>
     …
     …

I have the first a tag hidden in the css

  #slider a{
    display: none;
  }

What I want to happen is after 4 seconds of delay I fading in or slide in with some animation the next a tag and hiding the current. I want to do this until I get to the last a tag then I want to circle back around to the first a tag

I have this so far and not sure if I am heading in the right direction…any ideas?

$("#slider a").fadeIn(500).delay(3000)

Answer 1

$("#slider a:first").show();

$('#slider a').click(function(e) {
   e.preventDefault();
   $(this).hide();
   if ($(this).is('#slider a:last')) {
      $('#slider a:first').fadeIn(500);
   } else {
      $(this).next().fadeIn(500);
   }
});

I actually not understand what you need. However, if you want to show on page $(document).ready(..., you can try code bellow and modify as you need:

$(document).ready(function() {
   $('#slider a').each(function() {
      if ($(this).is('#slider a:first')) {
         $(this).fadeIn(500);
      } else {
         if ($(this).prev().not(':hidden')) {
            $(this).fadeIn(500);
         }
      }
   });
});