0

我一定是遗漏了一些简单的东西，或者我做错了。我的目标很简单。我想为 .show() .hide() 制作动画，我正在使用回调来等待一个动画完成，我遇到了两个问题。

  1. 动画被触发两次
  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')

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

于 2012-12-23T03:32:37.797 回答