所以我对某些我认为应该非常简单的问题有疑问。
为了简单起见,我编写了此示例:我首先在较大的代码体中注意到了这个问题。但是,此问题仍然存在。
<!DOCTYPE html>
<html>
<head>
<style>
#test
{
height: 300px;
width: 300px;
background: blue;
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="test"></div>
<script src='jquery-1.10.2.min.js'>
</script>
<script>
var isClicked = false;
$(document).ready(function(){
$('#test').click(function(){
isClicked = true;
});
if (isClicked == true)
{
$('#test').animate({top:'200px'});
}
});
</script>
</body>
</html>
动画没有播放...显然,可以用更简单的方式完成相同的任务,但是我仍然不明白为什么变量不起作用。可能只是一个愚蠢的错字-也许不是。
谢谢您的帮助!
最佳答案
加载DOM时,isClicked的值为'false'。由于该值为false,因此不会发生动画。像这样更改您的JS:
$(document).ready(function () {
var isClicked = false;
$('#test').on('click', function (event) {
isClicked = !isClicked;
if (isClicked) {
$(this).animate({top: '200px'});
}
});
});