Question

(edit)
It is supposed to rotate the fade between 3 images every 5 seconds. But rather it just fades the same one over and over every 5 seconds, never going to the next image. Here’s mote context because maybe the error wasn’t caused by anything in the initial post:

                $(".paging").show();  

                $(".paging a:first").addClass("active"); 

                $(".image_reel img:first").addClass("active");




                var imageWidth = $(".window").width();
                var imageSum = $(".image_reel div").size();  
                var imageReelWidth = imageWidth * imageSum;



                //Adjust the image reel to its new size
                $(".image_reel").css({'width' : imageReelWidth});  


                //Paging  and Slider Function
                rotate = function(){


                    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
                    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

                    $(".paging a").removeClass('active'); //Remove all active class

                    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

                    //Slider Animation
                    $(".image_reel").animate({
                        left: -image_reelPosition
                    }, 500 );

                    $(".image_text").animate({
                        left: -image_reelPosition
                    }, 500 );
                }; 
                //Below is part not working right
                fadeImg = function(){

                    $("#group1 img").removeClass('active'); 
                    $next.addClass('active');               

                    $("#group1 img").animate({
                        opacity: 0
                    }, 500 );

                    $next.animate({
                        opacity: 1
                    }, 500 );



                };

                //Rotation  and Timing Event
                rotateSwitch = function(){
                    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
                        $active = $('.paging a.active').next(); //Move to the next paging
                        if ( $active.length === 0) { //If paging reaches the end...
                            $active = $('.paging a:first'); //go back to first
                        }
                        rotate(); //Trigger the paging and slider function
                    }, 15000); //Timer speed in milliseconds (7 seconds)

                    playFade = setInterval(function(){ 

                        $next = $(".image_reel img.active").next();
                        if($next.length === 0){
                            $next = $(".image_reel img:first");
                        } 
                        fadeImg();
                    }, 5000);
                };

                rotateSwitch(); //Run function on launch

                //On Hover
                $(".image_reel a").hover(function() {
                    clearInterval(play); //Stop the rotation
                }, function() {
                    rotateSwitch(); //Resume rotation timer
                }); 

                //On Click
                $(".paging a").click(function() {
                    $active = $(this); //Activate the clicked paging
                    //Reset Timer
                    clearInterval(play); //Stop the rotation
                    rotate(); //Trigger rotation immediately
                    rotateSwitch(); // Resume rotation timer
                    return false; //Prevent browser jump to link anchor
                });

markup:

<div class="image_reel"> 
    <div id="group1">
        <a href="#"><img src="images/reel_1.png" class="first" /></a>  
        <a href="#"><img src="images/reel_1b.png" class="second" /></a>
        <a href="#"><img src="images/reel_1c.png" class="third" /></a>

        <p class="first">  A</p>
        <p class="second">  B</p>
        <p class="third">C</p>

        <div class="slidernav">
            <a href="#first"> A</a> 
            <a href="#second"> B</a> 
            <a href="#third"> C</a> 
        </div>
    </div>
</div>
​

Note that I am aware of plugins to create fade effects, but I’m trying to do it manually for now. Thanks for any response.

Answer 1

The problem is that: $next = $(".image_reel img.active").next(); does not do what you are wanting it to do. What that is doing is finding img.active and then trying to find its next sibling, since it doesn’t have any siblings $next gets set to an empty jQuery object.

What you want is something like this:

$next = $(".image_reel img.active").parent().next().find('img');