0

最初に単純な jQuery アニメーションを開発し、後で同じことを行う再利用性のために jQuery 関数を作成しました。ここにデモがあります: http://jsfiddle.net/SpMns/

私のコードは機能していますが、確実ではありません。ボタンをクリックしてコードを実行しても、何も起こりません。2 ～ 3 回クリックすると、アニメーションが開始されます。なぜ最初はうまくいかないのですか？

私のルーチンを見て、修正が必要な領域を教えてください。

jQuery.fn.busyToggle = function(ImgLoadSrc, marginBottom, opacity, speed, 
                                easing, callback) {
  var oDiv = $("<div id='BusyBox'><img src='" + ImgLoadSrc 
           + "'  alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
  if ($("#BusyBox").exists() == false) {
    //alert('div not exist');
    oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
    oDiv.css("border-top-left-radius", "5px");
    oDiv.css("border-top-right-radius", "5px");
    oDiv.css("bottom", "0px");
    oDiv.css("font-size", "0.8em");
    oDiv.css("font-style", "normal");
    oDiv.css("font-weight", "normal");
    oDiv.css("left", "50%");
    oDiv.css("margin-left", "-45px");
    oDiv.css("padding-top", "20px");
    oDiv.css("position", "fixed");
    oDiv.css("text-align", "center");
    oDiv.css("width", "90px");
    oDiv.css("height", "50px");
    oDiv.css("margin-bottom", "-70px");
    oDiv.css("background-repeat", "no-repeat");
    oDiv.css("background-position", "center center");
    oDiv.data('IsUp', 1)
    oDiv.appendTo('body');
  }

  // i work with jquery data function for achieving toggle behaviour
  if (oDiv.data('IsUp') == 1) {
    oDiv.data('IsUp', 0);
    return this.stop(true).animate({
      marginBottom: marginBottom,
      opacity: opacity
    }, {
      queue: false,
      duration: speed,
      complete: callback
    });
  }
  else {
    oDiv.data('IsUp', 1);
    return this.stop(true).animate({
      marginBottom: marginBottom,
      opacity: opacity
    }, {
      queue: false,
      duration: speed,
      complete: callback
    });
  }
};
$(document).ready(function() {
  $("#Process").click(function() {
    if (flag == 1) {
      $('#BusyBox').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
        alert('div visible')
      });
      flag = 0;
    }
    else {
      $('#BusyBox').busyToggle('images/loader.gif', -70, 0, 500, 0, function(){
        alert('div hide')
      });
      flag = 1;
    }
    return false;
  });
});

初めて実行したときにこれが失敗する原因は何ですか?

4

1 に答える 1

0

問題は、＃busyToggleでのこの使用法です

最初の呼び出しで、$（'＃BusyBox'）は空の配列になります。これは、これ（#busyToggle内）も空の配列であることを意味します。

あなたのprobelmへのより良い解決策はこのようにbusyToggleを呼び出すことです：

$('#Process').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
    alert('div visible')
});

関数では、これの代わりに$（'＃BusyBox'）を使用します。

あなたはそこにすべてのコードを見つけることができます：http：//jsfiddle.net/ubmCt/8/

PS：ready関数に次の行も追加しました。そうしないと、ほとんどのブラウザーで実行されません。

var flag = 1;

于 2012-06-19T15:04:06.207 に答える