Question

我正在尝试使用jquery创建一个按钮打开另一个窗口。

该按钮应该能够打开窗口。然后应使用相同的按钮关闭窗口。我似乎遇到的问题似乎是在按钮打开窗口后没有设置我的变量。我是javascript和jquery的新手，所以我不确定我是否做错了。

<html>
  <head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript"> 
      var FileEdit = 0;
      $(document).ready(function(){
        if (FileEdit == 0)
        {
           $("button").click(function(){
             $("div").animate({opacity:0.4},"fast");
             $("div").animate({height:300,width:300},"slow");
             $("div").animate({opacity:1},"slow");
             FileEdit = 1;
           });
        }  
        if (FileEdit == 1)
        {
             $("button").click(function(){
                $("div").animate({height:000,width:000},"slow");
                FileEdit = 0;
             });
        }
      });
    </script> 
  </head>

     <body>
       <button>Start Animation</button>
       <br /><br />
       <div style="background:#98bf21;height:000px;width:000px;">
       </div>
    </body>
</html>

http://jsfiddle.net/tqpTE/

Answer 1

jsFiddle DEMO

var FileEdit = 0;

$("button").on('click', function(){

    // You only need one on('click') function
    // Test for FileEdit here & do whatever you need

    if (FileEdit === 0) { 

        // Also having those 3 animations right in a row won't make them
        // go one - after - another. You need to use callback functions
        // to start the next animation after the previous one finished.

        $("div").animate({opacity:0.4},"fast", //callback1
            function () { $(this).animate({height:300,width:300},"slow", //callback2
                function () { $("div").animate({opacity:1},"slow"); }
            )}
        );
        FileEdit = 1;
    }

    else { 
         $("div").animate({height:000,width:000},"slow");
         FileEdit = 0;
    }
});

More info on .animate() callback functions

Answer 2

您的情况需要在每次点击时运行 - 不仅仅是一次，在DOM就绪，就像目前一样。另请注意，您的代码可以大大简化为：

var fileEdit = 0;
$(function(){
    $("button").on('click', function() {
        var anim_data = !fileEdit ? {width: 300, height: 300} : {width: 0, height: 0};
        $("div").animate(anim_data, 'slow');
        fileEdit = !fileEdit ? 1 : 0;
    });
});

一些注意事项：

1）你好像两次动画不透明度（一次到.4，同时，到1）所以，为了这个演示的目的，我完全删除了对它的引用。

2）除非你需要设置部分不透明度（而不是0或1）的动画，否则使用jQuery的fadeIn()和fadeOut()方法会更容易。

3）设置width: 000与width: 0相同。

4）避免使用var名称中的大写字母 - 大写字母通常用于表示构造函数。

5）在使用双等号对0和1值进行测试时要小心，因为the concept of truthy/falsy values会让您感到惊讶。如果不确定，使用===而不是==进行测试始终是最安全的。

6）虽然click很好，但jQuery 1.7引入了其杂乱事件API的整理，因此您现在只需使用on()和off()。 click()和其他人只是在幕后委派给on()的别名。

Javascript使用按钮更改变量

2 个答案: