2016-11-25 7 views
1

Я хотел бы анимировать этот 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; 
} 

И это яваскрипт и JQuery:

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

ответ

1

Удалить вызов .click() метод в вашей функции; то есть для прикрепления обработчиков событий, а не для их вызова. Попробуйте следующее:

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

Спасибо! Это решило. –