jQuery动画：如何从左到右移动一个值并返回？

Question

我想在点击任何明星之后从左到右移动一个类的值。下面的图片可能有助于我想要实现的成像。在这种情况下，我需要在点击一个星星后向右和向后移动“4.0”。 （4.0是Rails中生成的值。）

我试图从w3schools应用下面的代码。它在jsfiddle的例子中工作，但它在我的代码中不起作用。其他一切正常。

我在这里错过了什么？ 非常感谢。

HTML

<ul> 
    <li><a href="#/routes/1">Route 1</a> 
     <div id="Route1" class="rate_widget"> 
     <div class="star_1 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 1 ? "ratings_vote" : "" %>" data-score="1"></div> 
     <div class="star_2 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 2 ? "ratings_vote" : "" %>" data-score="2"></div> 
     <div class="star_3 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 3 ? "ratings_vote" : "" %>" data-score="3"></div> 
     <div class="star_4 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 4 ? "ratings_vote" : "" %>" data-score="4"></div> 
     <div class="star_5 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') == 5 ? "ratings_vote" : "" %>" data-score="5"></div> 
     </div> 
     <div class="total_votes"><%= "%0.1f" % Score.average('score', :conditions => 'route_id = 1') %></div>  
    </li> 
</ul> 

CSS

.ratings_stars 
    { 
    background: url('star_empty.png') no-repeat; 
    float:  left; 
    height:  28px; 
    padding: 2px; 
    width:  32px; 
    } 

.total_votes 
    { 
    background: yellow; 
    top: -10px; 
    margin: 12px 0px 10px 0px; 
    padding: 1px 0px 0px 5px; 
    position: relative; 
    width: 170px; 
    height: 17px; 
    line-height: 1; 
    color: red; 
    } 

jQuery的

// This records the vote 
     $('.ratings_stars').on('click', function() { 
     var score=$(this).attr("data-score"); 
     var route_id=$(this).parent().attr("id").replace('Route', ''); 


// This moves the score to the right 
     $('.ratings_stars').click(function() { 
     $('.total_votes').animate({left:'50px'}, 500) 
      $('.total_votes').animate({left:'0px'}, 500); 
     }); 

      $.post(
       '/scores', // this sends the voting data to the page '/scores' 
       { 
      "score[score]": score, 
      "score[route_id]": route_id 
     }, 
       function() { 
      alert('Thank you for your vote.'); 

Answer 1

您需要动画text-indent属性在其容器内移动文本<div class="total_votes">。

下面的代码将完成剩下的：

$("div.ratings_stars").on("click", function() { 
     var $this = $(this); 
     $this.parents("li").find("div.total_votes") 
       .animate({'text-indent': '150px'}) 
       .delay(100) 
       .animate({'text-indent':'0px'}); 
    }); 

This是链接到jsfiddle工作代码。