jquery。使用动画更改div宽度不起作用

Question

大家好，我有存储百分比的变量(WidthPercent)，例如: 67.33%

当我尝试用jquery动画改变宽度时，它不起作用：

$(this).animate({
        width: widthPercent,
    }, 2500);
});

但是用css改变宽度效果很好：

$(this).css('width', widthPercent);

有人知道我的问题出在哪里吗？

Answer 1

也许你需要引用widthPercent

这对我很有效

$(document).ready(
                function(){
                    var widthPercent = "35%";
                    $("#btn").click(
                    function(){

                        $(this).animate({
                            width: widthPercent,
                        }, 2500);
                    });
                }
            );

问题应该出在您的widthPercent定义中。

Answer 2

http://api.jquery.com/animate/

var widthPercent = "35%";

$(this).animate({
        width: "'"+widthPercent+"'"   // YOU ALSO HAD AN EXTRA COMMA HERE MEANING IT WAS EXPECTING ANOTHER ARGUMENT -- extra quotes may or may not be necessary depending on what your actual variable looks like
    }, 2500);
});

http://jsfiddle.net/A2bdQ/5/

此外，在使用%符号时，请务必使用引号，否则可能会被视为内联mod操作

Answer 3

这就是你的意思吗：

jQuery：

$('#foo').click(function(){
    var widthPercent = '66%';
    $(this).animate({
        'width': widthPercent,
    }, 2500);
});

CSS：

#foo{
   width:300px;
   background:#ff0000;
   height:100px;   
}

JSFiddle。