Два Вопросы по JQuery UI

Question

Так что я сделал быструю форму регистрации здесь:

http://jsfiddle.net/pBEt2/

Javascript:

$(document).ready(function(){ 
    $('input:button').click(function(){ 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       $('#answer').html("Please fill out all fields"); 
      } else{ 
       $currentField.removeClass('empty'); 
       $('#answer').html("Thank you!"); 
       $('#answer').effect('blind'); 
      } 
     }); 
}); 
}); 

В любом случае, как только вы заполните все поля, это дает вам ответ, что говорит «Спасибо», и я сделал эффект JQuery (называемый «жалюзи»), что делает текст повышающимся:

1-й вопрос:

С текущим кодом текст «спасибо» скользит вверх 4 раза из-за всего четырех входов. Почему? Как это исправить?

второй вопрос:

Как сделать так, эффект фактически не вступит в силу через несколько секунд. Таким образом, пользователь может видеть текст, а затем разрешить ему перемещаться вверх?

Спасибо.

Answer 1

Вы использовали $('input[type="text"]').each(function(indx)..., и из-за этого для любого input, который имеет type=text он работает этот код:

$('#answer').html("Thank you!"); 

отредактированные свой код и ваш Jquery:

$(document).ready(function(){ 

    $('input:button').click(function(){ 
     var flag = true; 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       flag=false; 
      } else{ 
       $currentField.removeClass('empty'); 
      } 
     }); 
     if(flag){ 
      $('#answer').css('display','block'); 
      $('#answer').html("Thank you!"); 
     } 
     else 
      $('#answer').html("Please fill out all fields"); 
}); 
}); 

http://jsfiddle.net/pBEt2/7/

Answer 2

$(document).ready(function(){ 
     var error = false; 
    $('input:button').click(function(){ 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       $('#answer').html("Please fill out all fields"); 
       error = true; 
      } else{ 
       $currentField.removeClass('empty'); 


      } 
     }); 
}); 

    if(error == true){ 
      $('#answer').html("Thank you!"); 
     $('#answer').effect('blind'); 
    } 
}); 

Вы использовали каждый.So он выполняет итерацию 4 раза. Поскольку у нас есть 4 поля ввода. Используя этот код, вы можете исправить проблему.

Answer 3

$(document).ready(function(){ 
    $("#answer").slideUp(); 
    $('input:button').click(function(){ 
     var correct = true; 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       correct=false; 
      } else{ 
       $currentField.removeClass('empty'); 
      } 
     }); 

     $("#answer").slideDown(); 
     if(correct){ 
      $('#answer').html("Thank you!"); 
      setTimeout(function() { 
       $("#answer").slideUp(); 
      }, 3000);//this is the time you want to wait. 
     } 
     else{ 
      $('#answer').html("Please fill out all fields"); 
     } 
    }); 
});