javascript - 动画只工作一次

我的 javascript 代码有一个小问题。当我点击 .add-case 时，动画功能只工作一次。仍然每次都显示“开启”功能中的警报。

$(document).on('click', '.add-case', function(){
    height = $('.filling').height();
    alert('Works') // This shows every time I click
    $('.filling').animate({ height: $(this).height() + 40}, 600);
    // this only works once
});

任何人都可以提供帮助？

最佳答案

问题:

这里的问题是单击元素的 height 不会在单击时更改。因此，每次单击都会检索和更新相同的高度。

$(this).height()

将获得 单击元素 的高度。事件处理程序中的 $(this) 是发生事件的元素的 jQuery 对象。

解决方案:

使用相对大小 +=40 将高度增加 40。虽然也可以使用 $(elementSelector).height() + 40，但最好使用相对单位。

$(document).on('click', '.add-case', function() {
  $('.filling').animate({
    height: '+=40'
  }, 600);
});

.filling {
  height: 10px;
  width: 50%;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="filling"></div>

<button class="add-case">Click</button>

关于javascript - 动画只工作一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33343425/