Question

在此先感谢您的支持。我这里有一个简单的代码，但我想知道它为什么不起作用。

以下代码被放入变量＆＃34;％＆＃34;

var percent = $('#div').animate({width:80 + '%'},1000);

我希望使用该变量成为特定div的文本或内容。我尝试这样做，但它不起作用。

$('#val').text(percent); or $('#val').html(percent);

我尝试使用JavaScript中的parseInt（）函数，但它也不起作用。

$('#web-design').text(parseInt(percent));

您有任何建议或可能吗？

Answer 1

我不确定行代码是否正确

var percent = $('#div').animate({width:80 + '%'},1000);

要找到#div的with属性，我会做类似的事情

$('#val').text($("#div").css("width"))

或

$('#val').text($("#div").width())

Answer 2

animate函数不会返回对元素的更改。要获得宽度，您必须使用.width()，但是您将获得像素而不是百分比。

var width = $('#div').width();

Answer 3

您可以尝试以下代码：

 $('#div1').animate({width:80 + '%'},{
 duration:1000,
 easing:'swing',
 step: function() { // called on every step
        $('#div1').text(Math.ceil($('#div1').width()/$('#div1').parent().width()*100) + "%");
    }
 });

这将在每个更新步骤中将Div宽度％打印为Div中的文本。

Answer 4

如果您的意思是想获得div的当前宽度，可以使用clientWidth属性：

$('#div')[0].clientWidth

Answer 5

您的代码将在1秒（1000毫秒）内以80%宽度设置动画。您可以在每次迭代时将百分比宽度增加1％并同时更新#val，直到达到80.以下是基于10000毫秒（10秒）的示例，您可以更改起始参数，例如{{ 1}}适合。演示：http://jsfiddle.net/zthaucda/

HTML：

duration, endWidth, startWidth

CSS：

<div class="my-anim-div"></div>
<button class="start-animating">Start animation</button>
<div id="val">Width will display here</div>

Javascript包括jQuery库：

.my-anim-div {
    width:0%;
    height:200px;
    background-color:red;
}

如何从jQuery中的动画div获取宽度

5 个答案: