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 。您可以在动画功能中提供complete功能：

$('#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 的

Answer 2

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

});

Answer 3

使用动画回调..

您的代码仅在开始时检查并更新宽度一次。每次动画更新内容宽度时都必须这样做。为此，您可以使用animate方法的回调。

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

Callback是一个作为＆＃39; animate＆＃39;的第三个参数传递的函数。并在动画结束时调用它。

工作小提琴：http://jsfiddle.net/7asv2/4/

Answer 4

您可以添加一个在动画的任何步骤中调用的函数

$('#content').animate({
        width: '+=40'
    }, {
        step: function (w) {
            msg.html(w);
        },
        duration: 500,
        easing: "linear"
    });

fiddle

我可以使用变量显示使用animate（）增加的div的宽度吗？

4 个答案: