Animer un paragraphe avec des images en rotation

Question

Fondamentalement, il y a 4 images qui défilent de la page. Maintenant, quand un utilisateur clique sur le lien, celui-ci défile. Mais je voulais ajouter une animation supplémentaire où un paragraphe (".image_text p") apparaît également sur la page, puis lorsqu'un autre lien est cliqué, ce texte va avec le reste de l'image et défile. Tout fonctionne sauf l'animation de la partie paragraphe.

Le problème:

1. Le texte est tout ratatinée ensemble (il y a quatre paragraphes et ils se chevauchent les uns les autres)

2. Lorsque je clique - il n'a même pas le temps de fade - et ennemis qui tournent hors de la page avant qu'il ne disparaisse.

3. La première page se charge, le premier paragraphe n'apparaît même pas du tout - lorsque vous cliquez sur le bouton, tous les paragraphes apparaissent. Il est censé être le premier paragraphe apparaît sur le chargement de la page, puis cliquez sur le paragraphe suivant apparaît comme premier défile avec l'image.

Le balisage et css sont corrects. Je pense que problème est quelque part dans ce 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 paragraphe:

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

Comme il peut être vu la raison pour laquelle le texte n'apparaît pas est parce que l'opacité commence à 0. Mais Cela est dû au fait qu'il est censé apparaître en fondu. Cependant, il semble qu'il ne s'estompe pas mais ne devient visible que lorsque l'on clique sur le lien et que, à ce moment-là, il fait défiler la page.

Answer 1

La solution était de spécifier comment p balises et multiples que par la largeur du conteneur, puis en spécifiant le conteneur avec la déclaration CSS overflow:hidden, qui masque toutes les balises p sauf le courant. En outre, les balises p devaient être flottaient à gauche afin de les amener à se comporter en ligne:

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