所以我对某些我认为应该非常简单的问题有疑问。

为了简单起见,我编写了此示例:我首先在较大的代码体中注意到了这个问题。但是,此问题仍然存在。

<!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'});
        }
    });
});

10-06 06:49