动画只能工作一次

时间:2015-10-26 10:26:41

标签: javascript jquery jquery-animate

我的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
}); 

任何有帮助的人?

3 个答案:

答案 0 :(得分:2)

问题确实是(这个)的使用。将其更改为$('.filling')并且可以正常运行。

答案 1 :(得分: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>

答案 2 :(得分:1)

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

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

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

如果您使用此功能,则可能是提供文档对象。