Question

我正在玩w3schools编辑器中的代码，该代码说明jQuery animate function。

我想尝试让这个动作可逆，所以我添加了一个if / else语句，允许div在已经被点击的情况下向后移动。

以下是脚本标记之间的代码：

var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = false;
        }

    });
});

我知道可能有更好的方法，但我对jQuery相当新。在任何情况下，看到jQuery只是扩展JavaScript，这似乎很奇怪，这不起作用。

---更新：更正amount未设置并包含整页代码---

这是我的新代码。再次点击时，div仍然无法移动。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: '250px'
            });
            clicked = false;
        }
    });
});

</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

Answer 1

它失败了因为你没有设置amount！

var clicked = false;
var amount = 0;
$(document).ready(function(){
   //more code that calls `amount`
})

检查此JSFiddle以查看它的实际效果：http://jsfiddle.net/1xt58q0a/1/

新的JSFIddle以匹配更新的问题：http://jsfiddle.net/1xt58q0a/5/

Answer 2

您可以使用.toggle()功能。

$(document).ready(function(){
   $("button").toggle(
      function(){
         $("div").animate({
            left: amount,
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
     },
     function(){
        $("div").animate({
           right: amount,
           opacity: '0.5',
           height: '150px',
           width: '150px'
        });
     }
   );
});

我假设你事先将amount设置为一个值。

div不会更改，因为opacity，height和width在两个选项中设置相同。

Answer 3

令人尴尬，但我的错误是对CSS的误解，而不是JS。

以下是更正后的功能代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                marginLeft: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                marginLeft: '0px'
            });
            clicked = false;
        }
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

为什么使用jQuery的if / else JS语句不起作用？

3 个答案: