회전하는 이미지와 함께 단락 애니메이션하기

Question

기본적으로 페이지 밖으로 스크롤하는 이미지가 4 개 있습니다. 이제 사용자가 링크를 클릭하면 해당 링크가 스크롤 오프됩니다. 그러나 단락 (".image_text p")이 페이지에 나타나고 다른 링크를 클릭하면 해당 텍스트가 나머지 이미지와 함께 이동하고 스크롤되는 추가 애니메이션을 추가하고 싶습니다. 단락 부분의 애니메이션을 제외하고 모두 작동합니다.

문제 :

1. 텍스트는 모두 함께지기 (네 단락있다 그리고 그들은 서로 중복되어있다) 내가 클릭하면

2. 됩니다

   - 그것조차 퇴색 할 시간이하지 않습니다 - 그리고 페이드하기 전에 적을 페이지에서 swirving.

3. 첫 페이지가로드 되어도 첫 번째 단락이 전혀 표시되지 않습니다. 버튼을 클릭하면 모든 단락이 나타납니다. 첫 번째 단락이 페이지로드에 표시되고 그 다음 클릭하면 다음 단락이 먼저 이미지로 사라집니다.

마크 업과 CSS가 정확합니다. 단락

 $(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 : 나는 문제가이 자바 스크립트 어딘가에 생각

는 텍스트가 표시되지 않는 이유를 알 벌 수 있듯이

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

입니다 불투명도가 0에서 시작하기 때문에 그러나 이는 페이드 인 (fade in)되기 때문에 의도 된 것입니다. 그러나 페이드 인하지 않고 링크가 클릭되었을 때만 보이게되고 그때까지 페이지에서 스크롤됩니다.

Answer 1

해결 방법은 컨테이너의 폭에 따라 p 태그와 배수를 지정하고 현재 이외의 모든 p 태그를 숨기는 CSS 선언이 overflow:hidden 인 컨테이너를 지정하는 것입니다. 과 대답을 추가 한 후 내가 당신이라면

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