Бесконечная анимация цвета фона в jQuery, каким образом?
-
05-09-2019 - |
Вопрос
Я работаю над веб-формой, в которой я хочу (после отправки формы) выделить те поля ввода, которые были введены неправильно.
Эффект выделения, который я хочу создать, - это бесконечно повторяющаяся анимация между background-color: #fcc
;и #fff
;в неисправных полях ввода, используя jQuery.Когда одно из этих полей получает фокус, я хочу остановить анимацию этого поля.
Я довольно слаб в jQuery и JS, поэтому, если кто-нибудь может указать мне правильное направление, я был бы искренне благодарен.
Решение
Ознакомьтесь с этими двумя плагинами jQuery:
Пульс: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
Добивайтесь Внимания: http://enhance .qd-creative.co.uk/demo/seekAttention/ (ссылка теперь мертва)
Я думаю, что Pulse - это то, о чем вы просили, но поиск внимания также может быть полезен в некоторых случаях.
Вот очень рудиментарный образец, который я создал с помощью плагина 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();" />
Когда пользователь переходит от текстового поля, оно начинает пульсировать, если оно пустое.Если они вернутся и заполнят его, он перестанет пульсировать.
Другие советы
Я сделал нечто подобное
Сначала создайте функциональную переменную javascript
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); }
Это приведет к созданию любого ввода, который у вас есть в классе .PulsePut выводит импульс, если он пуст.
вот как я бы это сделал (общие шаги):
- перебирайте входные данные, добавляйте класс "неверный" к этим полям
- во время зацикливания переключите bg "неправильных" классов, спите сколь угодно долго
- по щелчку ввода удалите его "неправильный" класс.
это может не сработать, если в цикле while больше ничего не выполняется.публикуйте исправления в комментариях.
Я бы зафиксировал событие 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;
});
});