1

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/

4

2 に答える 2

3

jsFiddle デモ

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

.animate() コールバック関数の詳細

于 2012-08-23T17:31:44.517 に答える
1

条件は、現在のように 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) 不透明度を 2 回アニメートしているように見えたので (1 回は .4 に、同時に 1 に)、このデモの目的のために、それへの参照を完全に削除しました。

2) 部分的な不透明度 (0 または 1 ではなく) にアニメーション化する必要がない限り、jQueryfadeIn()とfadeOut()メソッドを使用する方が簡単です。

3) 設定width: 000は と同じwidth: 0です。

4) var 名に大文字を使用しないでください。大文字は通常、コンストラクター関数を示すために使用されます。

5) true/falsy 値の概念により、驚くべき結果が得られるため、2 つの等号を使用し0て および値をテストする場合は注意してください。不確かな場合は、常にnotでテストするのが最も安全です。1=====

6)click問題はありませんが、jQuery 1.7 では面倒なイベント API の整理が導入されたため、on()and を使用できるようになりoff()ました。click()その他は、舞台裏で にデリゲートする単なるエイリアスですon()。

于 2012-08-23T17:36:17.730 に答える