jquery - 我可以使用变量显示通过 animate() 增加的 div 的宽度吗？

Question

是否可以使用 animate() 动态增加 div 的宽度 并将其显示在变量中？

我已经尝试了几件事，但变量仍然显示 div 的原始宽度(它为零)，所以它没有被更新。

HTML

<a href="#" id="button2">Add width</a>
<div id='content'></div>
<div id="msg"></div>

jQuery

$('#button2').click(function () {
    $('#content').animate({
        width: '+=40'
    }, 500);
});

var width = $('#content').width();
$("#msg").html(width);

Demo

所以我想知道如何才能实现这一目标。我应该为变量编写一个更新函数还是有更简单的方法？

Answer 1

看看documentation 。您可以在动画函数中提供完整函数:

$('#content').animate({
        width: '+=40'
    }, 500, function () {
      var width = $('#content').width();
      $("#msg").html(width);
});

或者，使用带有两个参数(属性和选项)的重载方法:

$('#button2').click(function () {
    $('#content').animate({
        width: '+=40'
    }, {
        step: function () {
            var width = $('#content').width();
            $("#msg").html(width);
        }
    })
});

FIDDLE DEMO