动画只能工作一次

Animation only works once

本文关键字：一次 工作 动画      更新时间：2023-09-26

我的javascript代码有一个小问题。当我点击。add-case时，animate函数只工作一次。仍然在"on"功能内的警报每次显示。

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

不要使用"this"，而是尝试通过id或类获取对象。如下所示:

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

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

如果你正在使用这个，它可能是给出文档对象。

问题确实在于(this)的使用。将其更改为$('.filling')，它可以工作。

相关文章：