动画只能工作一次

Question

我的javascript代码存在一个小问题。 当我点击.add-case时，animate fucntion只能工作一次。 每次都会显示“开启”功能中的警报。

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

有人可以提供帮助吗？

Answer 1

问题确实是（这个）的使用。 将其更改为$('.filling')并且它有效。

Answer 2

问题：

这里的问题是点击元素的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> 

Answer 3

而不是使用“this”，尝试通过其id或类获取对象。 如下图所示：

https://jsfiddle.net/HimeshS/y1cqsovg/

 $('.filling').animate({ height: $(".filling").height() + 40}, 600);

如果您使用它，它可能是给文档对象。