Animation ausgelöst beim zweiten Klick

Question

Ich möchte dieses div so animieren, wenn ich auf die Schaltfläche "Mehr anzeigen" klicken, ändert sich die Höhe abhängig von der Höhe des Textes. Ich habe Probleme mit den Animationen, weil sie erst beim zweiten Klick auf die Schaltfläche "Mehr anzeigen" ausgelöst werden. Irgendeine Idee bitte ??

Dies ist die HTML-Datei:

<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> 

Dies ist die CSS ist:

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

Und das ist die Javascript und Jquery:

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

Answer 1

die .click() Methodenaufruf entfernen in deiner Funktion; das heißt, Event-Handler anhängen, nicht aufrufen. Versuchen Sie dies:

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