2

画像があります。画像をクリックすると、アニメーションでデータが表示されます。ブラウザに表示されるデータまで画像を無効にします。データが読み込まれたら、画像を有効にする必要があります。

例えば

$("#imageid").click(function(e){
//disable the click
$("idforanim").animate({left : "-=50 "px"},500,function(){callfunction1();})
 })

callfunction1(){
//show the data
//enable the click
}

どうすればこれを達成できますか？

4

3 に答える 3

5

もう1つの方法は、データがまだ処理中であることを示すフラグを設定し、完了時にフラグの設定を解除することです。

var processing = false;

$("#imageid").click(function(e){
    if ( !processing )
    {
        //disable the click
        processing = true;
        $("idforanim").animate({left : "-=50px"},500,function(){callfunction1();})
    }
})

callfunction1(){
   //show the data
   //enable the click
   processing = false;
}
于 2013-02-12T21:55:50.607 に答える
1

animateこれは、アニメーションの完了時に呼び出す関数を使用するという事実を利用して行うことができます。例えば：

http://jsbin.com/adokiz/2

私たちがしていることはこれです：

$(document).ready(function() {
    var running = false;
    $('img').on('click', function(event) {
      if (running) return;

      running = true;
      console.log(this);
      $(this).animate({top: '400px'}, function() {
        $(this).css({top: 0});
        running = false;
      });
    });
});

名前付きのグローバル変数runningを使用すると、複数のクリックが同時に認識されないようにすることができます。これはコードとまったく同じではありませんが、簡単に適応させることができます。

これを行う別の方法は、2回の実行に対してさらに耐性があるはずですが、jQueryoneを使用して次のようにバインドすることです。

$(document).ready(function() {  
  var animation;

  var binding = function() {
    $('img').one('click', animation);
  };

  animation = function(event) {
    $(event.target).animate({top: '400px'}, function() {
      $(event.target).css({top: 0});
      binding();
    });
  };

  binding();
});

デモ： http： //jsbin.com/adokiz/3

于 2013-02-12T21:59:37.803 に答える
0

unbind次の方法を使用します。

var clickHandle = function(){
    $(this).unbind('click', clickHandle);
    callfunc();
};
var callfunc = function(){
    // do your stuff
    $('#imageid').click(clickHandle);// reinstall click handle
};
$('#imageid').click(clickHandle);
于 2013-02-12T22:08:08.697 に答える