Бесконечная фоновая цветная анимация в jQuery, как?

Question

Я работаю над веб-формой, где я хочу (после отправки формы) выделить эти поля ввода, которые не были введены правильно.

Эффект выделения, который я хочу создать, представляет собой бесконечную циклическую анимацию между background-color: #fcc; и #fff; в ошибочных полях ввода, используя jQuery. Когда одно из этих полей фокусируется, я хочу остановить анимацию этого поля.

Я довольно избитый в jQuery и JS, поэтому, если бы кто-нибудь мог указать мне в правильном направлении, я был бы искренне благодарен.

Answer 1

Проверьте эти два плагина Jquery:

Pulse: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

Seek Внимание: http://enhance.qd-creative.co.uk/demo/seekAttention/ (ссылка теперь мертв)

Я думаю, Pulse, что вы просили, но В некоторых случаях также может быть полезно обратиться к Внимание.

Вот очень зачаточный образца я создал с помощью импульсной заглушки.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://enhance.qd-creative.co.uk/demos/pulse/pulse.jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    function doSomething() { 
     if ($('.BadTextBox').val() == "") { 
      $('.BadTextBox').pulse({ backgroundColors: ['#fcc', '#fff'] }); 
     } 
     else { 
      $('.BadTextBox').css({'background-color': '#fff'}).stop(); 
     } 

    } 
</script> 

<input type="text" class="BadTextBox" onblur="doSomething();" /> 

Когда пользователь переходит от текстового поля он начинает пульсирует, если пусто. Если они вернутся и заполнить его, он перестанет пульсировать.

Answer 2

вот как я бы это сделать (общие шаги):

1. петли через входы, добавить класс «неправильный» в этих областях
2. в то время как цикл, переключение Б.Г. из «неправильных» классов, сон для однако long
3. при щелчке ввода, удалите его «неправильный» класс.

Это может не сработать, если в цикле while ничего не исполняется. пост исправления в комментариях.

Answer 3

я сделал что-то подобное

Во-первых, создать яваскрипта функцию переменной

var PulsePut = function(){ 

    if ($(this).val() == "") { 
     $(this).pulse({ backgroundColors: ['#ffffee', '#fff'] }); 
    } 
    else { 
     $(this).css({'background-color': '#fff'}).stop(); 
    } } 

Затем добавить класс к входам

<input type="text" class="PulsePut" /> 

Наконец, инициализацию функция

$(document).ready(function(){ 

$('.PulsePut').blur(PulsePut); } 

Это сделает любой ввод, который у вас есть с классом. Импульс импульсного импульса, если он пуст.

Answer 4

Я бы захватить событие ONBLUR и вызвать функцию для проверки ввода:

function matchShippingEmail() { 
$('#shippingEmail').css('border',validColor); 
if ($('#shippingEmail').val() == '') { 
    $('#shippingEmailLabel').html('email'); 
    return 0; 
} 
if ($('#shippingEmail').val().match(RegExp('^([a-zA-Z0-9._%%-]+@+[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})'))) { 
    $('#shippingEmailLabel').html('email'); 
    return 1; 
} else { 
    $('#shippingEmail').css('border',invalidColor); 
    $('#shippingEmailLabel').html(email error'); 
    return 0; 
} 

}

О форме представления, я сделал это:

$(document).ready(function() { 
$('.confirmOrder').click(function(event){ 
    if (!matchCardOwnerName())  {$('#cardOwnerName').css('border',invalidColor);  $('#cardOwnerName').focus();  return false;} 
    if (!matchCardNumber())   {$('#cardNumber').css('border',invalidColor);   $('#cardNumber').focus();   return false;} 
    if (!matchCVV2Code())    {$('#CVV2Code').css('border',invalidColor);    $('#CVV2Code').focus();    return false;} 
    if (!matchCardOwnerId())  {$('#cardOwnerId').css('border',invalidColor);   $('#cardOwnerId').focus();   return false;} 
    if (!matchShippingFullName()) {$('#shippingFullName').css('border',invalidColor);  $('#shippingFullName').focus();  return false;} 
    if (!matchShippingAddress()) {$('#shippingAddress').css('border',invalidColor);  $('#shippingAddress').focus();  return false;} 
    if (!matchShippingCity())  {$('#shippingCity').css('border',invalidColor);   $('#shippingCity').focus();   return false;} 
    if (!matchShippingZipCode()) {$('#shippingZipCode').css('border',invalidColor);  $('#shippingZipCode').focus();  return false;} 
    if (!matchShippingEmail())   {$('#shippingEmail').css('border',invalidColor);  $('#shippingEmail').focus();  return false;} 
    if (!matchShippingPhoneNumber()){$('#shippingPhoneNumber').css('border',invalidColor); $('#shippingPhoneNumber').focus(); return false;} 
    if (!$('#agreeToTermsAndConditions').attr('checked')) { 
     $('#agreeToTermsAndConditionsDiv').css('color','#FF0000'); 
     $('#agreeToTermsAndConditionsDiv').css('font-weight','bold'); 
     $('#agreeToTermsAndConditionsDiv').css('font','150%% ariel'); 
     return false; 
    } 
    $('html').css('cursor','wait'); 
    $('.confirmOrder').css('cursor','wait'); 
    $('#confirmOrderButton').attr('src','images/confirmOrderDisabled.jpg'); 
    $('#paymentForm').submit(); 
    //document.paymentForm.submit(); 
    $('form').get(0).setAttribute('action', '#'); //this works 

    return true; 
}); 

});