第二次点击触发动画答案

【问题标题】：Animation triggered on second click第二次点击触发动画
【发布时间】：2016-11-25 19:38:09
【问题描述】：

我想为这个 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);
        });
    }

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

删除函数中的.click() 方法调用；那是为了附加事件处理程序，而不是调用它们。试试这个：

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

【讨论】：