CODEWITHSUNDEEP
jqueryhtml
2chins
2chins

Reputation: 7

JQuery- animate() only works once on clicking

I have used 2 anchor tags(#trendingnexticon and #trendingpreviousicon) to move the content of the container ,When I click on the tag The content moves to the right or left perfectly but it is only moves once. When I click again , It won't move! Any suggestions?

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>

Upvotes: 0

Views: 58

Answers (1)

user1777136
user1777136

Reputation: 1756

By executing $("#trendingtable").animate({right: '800px'}); you are effectively saying "animate the element until it has a position of 800px from the right relative to its parent.". Performing this twice won't have an effect. If you want it to move multiple times, you could use a relative movement like

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

See docs here: http://api.jquery.com/animate/

Upvotes: 1

Related Questions