Hide the text of the paragraph when it is outside the div

Hide the text of the paragraph when it is outside the div

Hey guys!

I am quite new to jQuery and I would like to make a simple slider where the images would fade in while the text would slide in from the left in the same time, over the image.

This is how my HTML code is structured:
  2. <div id="container">
  3.                 <div id="cine-suntem">
  4.                     <div class="slide" id="slide1">
  5.                         <img src="images/yumm-pizza1.jpg" alt="Image Slide Pizza"  width="581"                         height="342">
  6.                         <p class="normal" id="normal1">Cel mai simplu si rapid mod sa te</p>
  7.                         <p class="normal" id="normal2">hotarasti ce vrei sa comanzi acasa</p>
  8.                     </div>
  9.                     
  10.                     <div class="slide" id="slide2"><img src="images/yumm-pizza2.jpg" alt="Image                         Slide Pizza" width="581" height="342">
  11.                         <p class="normal" id="normal1">Bucurate de cele mai bune</p>
  12.                         <p class="normal" id="normal2">oferte de home-delivery de la malul marii!</p>
  13.                     </div>
  14.                     <div class="slide" id="slide3"><img src="images/yumm-pizza3.jpg" alt="Image                         Slide Pizza"  width="581" height="342">
  15.                         <p class="normal" id="normal1">Bucurate de cele mai bune</p>
  16.                         <p class="normal" id="normal2">oferte de home-delivery de la malul marii!</p>
  17.                     </div> 
  18.                 </div>
  19.             </div>
Here is my script :

  1. $("#cine-suntem > div:gt(0)").hide();

  3. setInterval(function() {
  4.     $(".normal").animate({left: 5, opacity: 1}, 2000 , "swing");
  5.     $('#cine-suntem > div:first')
  6.     .fadeOut(1000)
  7.     .next()
  8.     .fadeIn(1000)
  9.     .end()
  10.     .appendTo('#cine-suntem');
  11.     $(".normal").animate({left: -430, opacity: 0}, 3000 , "swing");
  12. },  5000);
The problem is that I can see the text coming into the picture and going out. I want this to be invisible to the user :D

Thanks a lot for your help and time!