0

所以我遇到了一些我认为应该很简单的问题。

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

<!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>

动画没有播放......显然可以以更简单的方式完成相同的任务，但我仍然不明白为什么变量不起作用。可能只是一个愚蠢的错字 - 但也许不是。

谢谢您的帮助！

4

2 回答 2

4

您的测试isClicked是在 dom 就绪时执行的，此时您还没有点击。

您应该在点击处理函数中移动代码。

于 2013-11-11T21:01:55.237 回答
2

加载 DOM 时，isClicked 的值为“false”。由于该值为 false，因此不会出现动画。像这样改变你的JS：

$(document).ready(function () {
    var isClicked = false;
    $('#test').on('click', function (event) {
        isClicked = !isClicked;
        if (isClicked) {
            $(this).animate({top: '200px'});
        }
    });
});
于 2013-11-11T21:04:16.580 回答