Javascript/JQuery .animate（）不工作

我試圖創建一個滑動圖像庫，其中每個間隔他們將沿着滑動，第一個圖像將淡出，並且新圖像將淡入。淡入和淡出是工作和我的圖像設置爲'位置：絕對'，但他們不會滑動。我設置了一個的jsfiddle所以你可以看到發生了什麼：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); 

    });

預先感謝您的幫助！

來源

2013-11-23 user1009573

您正在爲p元素的left屬性設置動畫，但它具有靜態默認position，所以這不起任何作用。您應該在img元素上設置動畫left或給予p元素絕對或相對定位。

來源

2013-11-23 20:23:32 lshearer

的問題是，所述p元件具有id，而不是img

<p><a href="includes/images/discoImg1.png"> 
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>

來源

2013-11-23 20:19:26

沒有與屬性沒有影響左沒有絕對位置或固定。

來源

2013-11-23 20:22:37 kardossandor

在您css試着給那個absolute位置的left: 0px;可能是它要自動滑動，不要忘了給它一個relative容器。

來源

2013-11-23 20:26:09 amostk

Javascript/JQuery .animate（）不工作

回答

相關問題