动画的第二次点击触发

Question

我想动画这个div所以当我点击“显示更多”按钮，根据文字的高度的高度变化。我在动画中遇到问题，因为只有第二次点击“显示更多”按钮才会触发动画。请任何想法？

这是HTML文件：

<div class="col-sm-4 "> 
    <div class="testimonial"> 
     <h5>John P.</h5> 
      <div id="div1" class="comment-container" ng-class="{show1:show1}"> 
<p>“Yes very good experience, the tekker came on time and known how to do his job, very pleased with the service.“ 
       </p> 
      </div> 

      <button id="comm1" class="btn btn-info1 btn-xs" style="cursor: pointer; margin-top: 20px; margin-bottom: 12px; border-radius: 10px;" 
        ng-click="homeCtrl.animateComment();" ng-show="!show1">Show more 
      </button> 

      <button class="btn btn-info2 btn-xs" style="cursor: pointer; margin-bottom: 12px; border-radius: 10px;" 
        ng-click="show1 = false;" ng-show="show1">Show less 
      </button> 
     </div> 

     <img class="triunghi" src="/img/triunghi.png"> 
</div> 

这是CSS：

.comment-container { 
    font-size: 16px; 
    line-height: 20px; 
    height: 52px; 
    overflow: hidden; 
    margin-bottom: -12px; 
} 
.show-more{ 
    cursor: pointer; margin-top: 20px; margin-bottom: 12px; 
} 
.show-less{ 
    cursor: pointer; margin-bottom: 12px; 
} 
.show1 { 
    overflow: visible; 
    height: auto; 
} 
.show2 { 
    overflow: visible; 
    height: auto; 
} 
.show3 { 
    overflow: visible; 
    height: auto; 
} 

这是JavaScript和jQuery：

function animateComment() { 
     $scope.show1 = true; 
     $("#comm1").click(function(){ 
      $("#div1").animate({ 
       left: '250px', 
       opacity: '0.5', 
       height: '150px' 
      },2000); 
     }); 
    } 

Answer 1

取出.click()方法调用在你的功能;这是为了附加事件处理程序，而不是调用它们。试试这个：

function animateComment() { 
    $scope.show1 = true; 
    $("#div1").animate({ 
     left: '250px', 
     opacity: '0.5', 
     height: '150px' 
    }, 2000); 
}