Question

Hi I am a beginner jQuery user and I am trying to create a cross fading efect but it seems I cant seem to select the corect element.This is my code:

<ul id="slideimage">
    <li ><img src="img/slider/pic/slide01.jpg" alt="img" class="active"/></li>
    <li><img src="img/slider/pic/slide02.jpg" alt="img" /></li>
    <li><img src="img/slider/pic/slide03.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide04.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide05.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide06.jpg" alt="img"/></li>
</ul>

ul#slideimage li img{
          position: absolute;
          width:100%;
          height: 500px;
          z-index: 0;
            }
ul#slideimage li img.active{
          z-index: 10;
            }

(function(){
      setInterval("slideshow()" , 2000);
})();   

function slideshow(){
             var $first = $('ul#slideimage li img:first');
             var $active = $('ul#slideimage  li img.active');
             var $next = $active.next('ul#slideimage li img').length ? $active.next('ul#slideimage li img'): $first;
                        console.log($next);

                        $active.animate({'opacity':'0'},1000,function(){
                            $(this).removeClass('active').css({'opacity':'1'});
                        });
                        $next.addClass('active');
                    }

What is the problem with the code that it keeps fading out the first image and then making it appear again.I think I am not managing to target the next element correctly but I have been trying to do this for the last 3 hours with no success.Some help would be much appreciated.

Answer 1

You have quite a few syntax errors in the code structure provided but see below:

    <style>
    ul#slideimage li img{
        position: absolute;
        width:100%;
        height: 500px;
        z-index: 0;
    }
    ul#slideimage li img.active{
        z-index: 10;
    }
    </style>
    <script type="text/javascript">
        var counter=0;
        function slideshow(){
            var total = $('ul#slideimage li img').size();
            var $active= $('ul#slideimage li img');
            $active.filter(function(index){return index== counter % total})
            .animate({'opacity':'0'},1000,function(){
                $(this).css({'opacity':'1'});
            });
            counter++;
        }


        $(function() {                  
            slideshow();                
            setInterval(slideshow, 2000);
        });
    </script>