Javascript/JQuery .animate() 작동하지 않음

나는 모든 간격을 따라 슬라이드 할 첫 이미지가 사라지고 새 이미지가 희미 해지는 슬라이딩 이미지 갤러리를 만들려고합니다. 페이드 인 및 페이드 아웃은 다음과 같습니다. 작업하고 내 이미지는 '위치 : 절대'로 설정되지만 슬라이드되지는 않습니다.Javascript/JQuery .animate() 작동하지 않음

http://jsfiddle.net/9awwF/

HTML 코드 :

<head> 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 

</head> 

<body> 

<div style="position: relative; left: 0px; top: 0px;"> 

    <p id="discoImg1a"><a href="includes/images/discoImg1.png"> 
     <img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p> 

    <p id="discoImg2a"><a href="includes/images/discoImg2.png"> 
     <img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p> 

    <p id="discoImg3a"><a href="includes/images/discoImg3.png"> 
     <img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p> 

    <p id="discoImg4a"><a href="includes/images/discoImg4.png"> 
     <img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p> 

    <p id="discoImg5a"><a href="includes/images/discoImg5.png"> 
     <img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p> 

    <p id="discoImg6a"><a href="includes/images/discoImg6.png"> 
     <img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p> 

    <p id="discoImg7a"><a href="includes/images/discoImg7.png"> 
     <img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p> 

    <p id="discoImg8a"><a href="includes/images/discoImg8.png"> 
     <img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p> 

    <p id="discoImg9a"><a href="includes/images/discoImg9.png"> 
     <img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p> 

</div> 

</body>

스크립트 :

$(document).ready(function() { 

     $("#discoImg6a").hide(); 
     $("#discoImg7a").hide(); 
     $("#discoImg8a").hide(); 
     $("#discoImg9a").hide(); 

     var currentFirstSlide = 1; 
     var maxSlides = 9; 

     function updateSlides() { 
      // Fade out the first image shown     
      $("#discoImg" + currentFirstSlide + "a").fadeOut(3000); 

      // Go through every image and move them to the left by 250px 
      for (var x = 1; x < 10; x++) { 
       var left = $("#discoImg" + x + "a").position().left; 
       $("#discoImg" + x + "a").animate({ left: left - 250 + 'px' }); 
      } 

      // Calculate which slide the new one will be and fade it in 
      var newSlide = currentFirstSlide + 5; 
      if (newSlide > maxSlides) { newSlide = 1; } 
      $("#discoImg" + newSlide + "a").fadeIn(3000); 

      // Increment the current first slide ready for the next update 
      currentFirstSlide++; 
      if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; } 
     } 

     // Move the slides every 3.5s 
     setInterval(function() { updateSlides() }, 3500); 

    });

가 사전에 어떤 도움을 주셔서 감사합니다 당신이 무슨 일이 일어나고 있는지 볼 수 있도록 나는 jsfiddle을 설정!

출처

2013-11-23 user1009573