Question

I am trying to create a simple JQuery Div Slider, but it doesn’t seem to be hiding the initial div or functioning properly.

Here is my HTML:

<div id="feature">
    <div class="feature_container">
        <div><p>Slide 1 Content</p></div>
        <div><p>Slide 2 Content</p></div>
    </div>
</div>

Here is the JQuery code:

    <script>
  $(function(){
    $('.feature_container div:gt(0)').hide();
    setInterval(function() {
        $('.feature_container :first-child').fadeOut()
            .next('div').fadeIn()
            .end().appendTo('.feature_container');},
        3000);
    })
  });
  </script>

Am I doing anything in the JQuery code here that’s not allowed or incorrect?

Thanks in advance for any help- it’s much appreciated! I would use a plugin too, but I’m really trying to figure out all of this by doing it by hand…

Answer 1

I just scrapped the above code and re-wrote it and this seems to be working:

    $('.feature_container div:gt(0)').hide();
setInterval(function(){
    $('.feature_container div:first').fadeOut().next('div').fadeIn().end().appendTo('.feature_container');
}, 8000);