0

私は単純なものを見逃しているか、これを完全に間違っています。私の目標は単純です。.show() .hide() をアニメーション化したいのですが、コールバックを使用して 1 つのアニメーションが終了するのを待っていますが、2 つの問題が発生します。

  1. アニメーションが 2 回トリガーされる
  2. コールバックがすぐに実行される / 最初のアニメーションが終了するのを待たない

ここに私のjQueryコードがあります:

   $('#miles').on({
    keyup: function(){if($(this).hasClass('error')){$(this).removeClass('error',animSpeed);}},
    focusin: function(){thisTime=$(this).val();if($(this).hasClass('error')){$(this).removeClass('error',animSpeed);}if($(this).val()=='miles'){$(this).val('');}},
    focusout: function(){
     if($(this).val()==''){$(this).val('miles');}
     else if(thisTime!=$(this).val()){
      if($(this).val().match(/^[0-9]+$/)&&$(this).val()>0){
       $.post('include/process.php',{q:'saveMiles',e:$('#email').val(),w:$(this).val()},function(json){
        if(json.error==null||json.error==undefined){
         $('#saved').html('last saved '+json.date);
        }else{
         $(this).addClass('error',animSpeed);
         if(json.type=='notaNumber'){$('#errorBox>p').hide('fade',animSpeedErr,function(){$('.'+json.type).show('fade',animSpeedErr);})};
        }
       },"json");
      }else{
       console.log('now');
       $(this).addClass('error',animSpeed);
       $('#errorBox>p').hide('fade',animSpeedErr,function(){console.log('now1');
        if($('#miles').val()==0){console.log('now2');$('.notZero').show('fade',animSpeedErr);}
        else{console.log('now3');$('.notaNumber').show('fade',animSpeedErr);}
       });
      }
     }
    }
   });


var animSpeed=700;
var animSpeedErr=350;
json.type = what kind of error to show

#errorBox>p にはdisplay:none;があります。CSSで宣言

このコードの機能: #miles が数値かどうかを確認し、数値が 0 より大きい場合は、以前のエラーを非表示にして現在のエラーを表示します。このスクリプトを実行すると、コンソールに次のように表示されます。

now
now1
now2
now1
now2
now1
now2
now1
now2

スクリプトはhttp://developer.sodobniinternet.eu/concertdriveで公開されています。「マイル」入力ボックスに 0 または文字を入力するだけで、問題が表示されます。

私が試した：

.stop(true,true)

成功しませんでした。

また、コールバックから削除しようとしましたが、希望どおりに機能することもあれば、機能しないこともあります。そのため、前の関数が終了したときに関数を呼び出すコールバックがあると思います。

ご協力ありがとうございました。

4

1 に答える 1

1

問題はセレクターにあります：

$('#errorBox>p').hide('fade',animSpeedErr,function(){console.log('now1')

には4つの段落があり#errorBox、それぞれが個別に非表示になっているため、コールバックはイベント.hide()ごとに4回呼び出されますfocusout

于 2012-12-23T03:32:37.797 に答える