JQuery-animate（）只能在點擊時工作一次

我已經使用了2個錨點標籤（#trendingnexticon和#trendingpreviousicon）來移動容器的內容，當我點擊標籤時內容完全向右或向左移動但它只能移動一次。當我再次點擊時，它不會移動！有什麼建議麼？JQuery-animate（）只能在點擊時工作一次

的Javascript：

$(document).ready(function(){ 
     $("#trendingnexticon").on('click' ,function(){ 
      $("#trendingtable").animate({right: '800px'}); 
     }); 
    }); 


    $(document).ready(function(){ 
     $("#trendingpreviousicon").on('click' ,function(){ 
      $("#trendingtable").animate({left: '100px'}); 
     }); 
    });

HTML：

<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: 
    hidden;"> 
     <table id="trendingtable" class="table" style="position:relative;"> 
     <a id="trendingpreviousicon" style="cursor:pointer; margin-top: 
    62px; position:absolute; z-index:1;" class="previous round">&#8249;</a> 
     <a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px; 
    margin-top: 62px; position:absolute; z-index:1;" class="next 
    round">&#8250;</a> 
     <tr> 
     <?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?> 
      <td> 
       <div class="media" style="border: 1px solid #e6e6e6; 
    width:400px; padding: 0px;"> 
       <img src="images/<?=$tsingers['image'];?>" alt="<? 
    =$tsingers['name'];?>" 
       class="pull-left img-responsive" style="width: 200px; height: 
    150px;" id="artistimg"> 
       <div id="trendingmediabody" class="media-body"> 
       <p id="trendingname" style="font-size:14px; font-weight: 
    bolder;"><?=$tsingers['name'];?></p> 
       <p id="trendingcategory" style="font-size:12px; font-weight: 
    bolder;"><?=$tsingers['category'];?></p></br></br> 
       </div> 
      </div> 
      </td> 
     <?php endwhile; ?> 
     </tr> 
     </table> 
    </div>

來源

2017-07-30 2chins

通過執行$("#trendingtable").animate({right: '800px'});你實際上是說「動畫元素，直到它具有800像素從相對於它的父權的位置。」執行這兩次不會產生任何效果。如果你想讓它移動多次，你可以使用像

$("#trendingtable").animate({right: '+=800px'});

查看文檔這裏的相對運動：http://api.jquery.com/animate/

來源

2017-07-30 19:48:35 user1777136

謝謝！它現在可以工作了。但是我遇到了一個新問題。如果我點擊左側的圖標一次，然後點擊右側的圖標不起作用。右側圖標變爲「禁用」一旦左側圖標被點擊，是否有東西丟失？ – 2chins

JQuery-animate（）只能在點擊時工作一次

回答

相關問題