Jquery 使用if语句设置div动画不起作用

我试图完成的是一个简单的div动画，每次有人点击它时，div都会扩展200px。我创建了一个变量sizeCounter，每次单击div时它都会增长200。当sizeCounter达到700时，我希望div将其背景色属性更改为绿色。但是，它不起作用。我的代码有什么问题

$（文档）.ready（函数（）{
var sizeCounter=100；
$（“.box”）。单击（函数（）{
$（“.box”）.animate({
高度：“+=200px”，
宽度：“+=200px”
}, 1000);
sizeCounter+=200；
$（“.text”）.animate({
不透明度：“0.5”，
顶部：“+=60px”
});
});
如果（sizeCounter==700）{
$（“.box”）。单击（函数（）{
$（“.box”）.css({
“背景色”：“绿色”
});
});
}
});
.box{
高度：100px；
宽度：100px；
背景色：深蓝色；
位置：相对位置；
}
.文本{
颜色：#fff；
文本对齐：居中；
}

单击我
问题在于，当页面加载时，
if
语句只执行一次，并且
div
的宽度仅为
100px
宽度

要解决此问题，您需要在
animate（）
的回调中检查宽度，以便它检测宽度的变化。试试这个：


$（文档）.ready（函数（）{
var sizeCounter=100；
$（“.box”）。单击（函数（）{
$（“.box”）.animate({
高度：“+=200px”，
宽度：“+=200px”
}，1000，函数（）{
sizeCounter+=200；
如果（sizeCounter==700）{
$（“.box”）。单击（函数（）{
$（“.box”）.css({
“背景色”：“绿色”
});
});
}
});
$（“.text”）.animate({
不透明度：“0.5”，
顶部：“+=60px”
});
});
});
.box{
高度：100px；
宽度：100px；
背景色：深蓝色；
位置：相对位置；
}
.文本{
颜色：#fff；
文本对齐：居中；
}

单击我
问题在于，当页面加载时，
if
语句只执行一次，并且
div
的宽度仅为
100px
宽度

要解决此问题，您需要在
animate（）
的回调中检查宽度，以便它检测宽度的变化。试试这个：


$（文档）.ready（函数（）{
var sizeCounter=100；
$（“.box”）。单击（函数（）{
$（“.box”）.animate({
高度：“+=200px”，
宽度：“+=200px”
}，1000，函数（）{
sizeCounter+=200；
如果（sizeCounter==700）{
$（“.box”）。单击（函数（）{
$（“.box”）.css({
“背景色”：“绿色”
});
});
}
});
$（“.text”）.animate({
不透明度：“0.5”，
顶部：“+=60px”
});
});
});
.box{
高度：100px；
宽度：100px；
背景色：深蓝色；
位置：相对位置；
}
.文本{
颜色：#fff；
文本对齐：居中；
}

单击我