我正在构建自定义联系表单。我的所有输入字段都有一个mouseenter / mouseleave和focus / blur动画(background-color)。我的问题代表着blur()和focus()。 这是Name字段的代码:
$('#userName').on('mouseenter', function(){
if($.trim($(this).val()) == ""){
$('#userName').animate({'background-color':'#FECC00'}, 200);
}
});
$('#userName').on('mouseleave', function(){
if($.trim($(this).val()) == ""){
$(this).stop(true).animate({'background-color':'#ffffff'}, 200);
}
});
$('#userName').focus(function(){
$(this).animate({'background-color':'#B0CB1F'}, 200);
});
$('#userName').blur(function(){
$(this).animate({'background-color':'#ffffff'}, 200);
if($.trim($(this).val()) == ""){
nameInvalidation();
}
else{
nameValidation();
}
});
nameInvalidation()和nameInvalidation()是一些动画复选标记:
当我输入输入字段并且什么也不做时,nameInvalidation()会运行;当我输入nameValidation()运行的东西时 - 所以我知道该字段是否准备就绪。 问题是:
...而不是nameInvalidation()动画不会运行,因为它已经是默认动画。
同样的事情,当字段作为一些数据,我进入它,更改或只是离开...绿色复选标记再次运行。
我尝试使用keyup()并且它在某种程度上起作用,但它在每次击键时运行复选标记动画 - 我离开场时只想要它。
这是Fiddle。
佩德罗
答案 0 :(得分:0)
创建一个保存被调用方法
当前状态的变量 var currentValidationMethodMane;
function nameValidation(){
if(currentValidationMethodMane == "nameValidation"){
return;
}
currentValidationMethodMane = "nameValidation";
.........
function nameInvalidation(){
if(currentValidationMethodMane == "nameInvalidation"){
return;
}
currentValidationMethodMane = "nameInvalidation";
.....