Question

当点击按钮（在本例中是另一个div）时，我试图以百分比更改div的宽度。我已在此example中使用它，但无法在我的网站的实际代码中成功重新创建它，其中一个示例是here。它们与我的眼睛完全相同，但显然出现了问题。

正在使用的javascript是：

$('#button').click(function() {
if(!collapsed){
    $('.left').animate({width: '10%'});
} else {
    $('.left').animate({width: '50%'});
}
collapsed = !collapsed; });

然而，至少在第二个例子中，没有任何结果。

Answer 1

您的版本有两个问题：

jsFiddle没有包含jQuery。
您没有定义collapsed变量，因此您在控制台中收到错误。

修复这些问题并且有效。另请注意，您可以使用三元表达式将宽度更改为单行：

var collapsed = false;
$('#button').click(function() {
    $('.left').animate({ width: collapsed ? '50%' : '10%' });
    collapsed = !collapsed;
});

Working example

在调用stop(true)之前添加animate()以防止连续点击填满动画队列也是值得的。

使用jquery中的百分比来动画div的宽度

1 个答案: