Question

我必须遗漏一些简单的东西或者我完全错了。我的目标很简单。我想动画.show（）。hide（），我正在使用回调等待一个动画完成，我遇到两个问题。

动画被触发两次
执行回调很快/不等待第一个动画结束，

这是我的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＆gt; p在CSS中声明了 display：none;

此代码的功能：检查#miles是否为数字，如果数字大于0，则检查是否隐藏先前的错误并显示当前错误。如果我运行这个脚本，我会在控制台中得到它：

now
now1
now2
now1
now2
now1
now2
now1
now2

脚本在http://developer.sodobniinternet.eu/concertdrive生效。只需在“里程”输入框中输入0或字母，您就会看到问题。

我尝试过：

.stop(true,true)

没有成功。

还尝试从回调中删除，有时候工作就像我想要的那样，有时不会。这就是为什么我认为有一个回调，当前一个函数完成时调用一个函数。

感谢您提供的任何帮助。

Answer 1

问题在于选择器：

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

#errorBox中有四个段落，每个段落都是单独隐藏的，因此每个.hide()事件会为您的focusout回调调用4次

jQuery .show（）回调不等待动画结束

1 个答案: