jquery - 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;   
}

JSF中。

Answer 4

您需要在宽度值中添加一个 '%' 字符，如下所示：

$(this).css('width', widthPercent + '%')

这是一个说明它的jsfiddle 。