javascript - jQuery中无尽的背景色动画，如何？

Question

我正在处理一个网络表单，我希望（在表单提交后）突出显示那些未正确输入的输入字段。

background-color: #fcc我希望创建的高光效果是在;之间无限循环的动画。和#fff; 在错误的输入字段中，使用 jQuery。当其中一个领域获得焦点时，我希望停止该领域的动画。

我在 jQuery 和 JS 方面相当与众不同，所以如果有人能指出我正确的方向，我将不胜感激。

Answer 1

看看这两个 jQuery 插件：

脉冲：http: //james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

寻求注意：http ://enhance.qd-creative.co.uk/demo/seekAttention/ （链接现已失效）

我认为 Pulse 是您所要求的，但 Seek Attention 在某些情况下也很有用。

这是我使用脉冲插件创建的一个非常基本的示例。

<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

我做了类似的事情

首先创建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 类的任何输入产生脉冲。

Answer 3

这是我的做法（一般步骤）：

1. 循环输入，将类“不正确”添加到这些字段
2. 循环时，切换“不正确”类的背景，睡眠时间长
3. 点击输入，删除它的“不正确”类。

如果在 while 循环中，这可能不起作用，没有其他可执行文件。在评论中发布修复。

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;
});

});