動畫的第二次點擊觸發

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); 
}