Question

Basically there are 4 images that scroll off the page. Now when a user clicks the link, that one scrolls off. But I wanted to added an additional animation where a paragraph (“.image_text p”) appears on page as well and then when another link is clicked, that text goes along with rest of image and scrolls off. Everything works except the animation of the paragraph part.

The problem:

1. The text is all squished together (there’s four paragraphs and they are overlapping each other)

2. When I click – it doesn’t even have time to fade it- and foes swirving off page before it fades.

3. First time page loads, the first paragraph doesn’t even appear at all – when button is clicked, all paragraphs appear. It’s supposed to be the first paragraph appears on page load and then click then the next paragraph appears as first scrolls away with image.

The markup and css are correct. I think problem is somewhere in this javascript:

      $(function() {
        $('#slideshow').crossSlide({
          sleep: 2,
          fade: 1
        }, [
          { src: '../images/img1.png' },
          { src: '../images/img2.png' },
          { src: '../images/img3.png' },
          { src: '../images/img4.png' }
        ])

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


                //Get size of the image, how many images there are, then determin the size of the image reel.
                var imageWidth = $(".window").width();
                var imageSum = $(".image_reel img").size();
                var imageReelWidth = imageWidth * imageSum;

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

                //Paging  and Slider Function
                rotate = function(){
                    $activep = $('.image_text p:first');


                    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
                    $(".image_text p").removeClass('active'); //Remove all active class

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

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

                    $(".image_text p").animate({
                        opacity: .99,
                        left: -image_reelPosition
                    }, 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
                        $activep = $('.image_text p').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
                    }, 7000); //Timer speed in milliseconds (7 seconds)
                };

                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
                });
      });

CSS for paragraph:

.image_text p {
text-align: right;
width: 500px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
 }

As it can bee seen the reason why the text isn’t shown is because the opacity starts at 0. But this is intended because it’s supposed to fade in. However, it appears it doesn’t fade in but rather only becomes visible when link is clicked and by that time it scrolls off the page.

Answer 1

The solution was to specify how may p tags and multiple that by width of container and then specifying the container with the css declaration overflow:hidden, which hides all p tags except the current. Also, p tags had to be floated left in order to get them to behave inline:

.window {
    margin-top: 20px;
    height:286px;
    width: 655px;
    overflow: hidden; 
    position: relative;
} 

.image_text  {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.image_text p {
    float: left;
    margin-left: 10em;
}