jQuery의 끝없는 배경색 애니메이션, 어떻게?

StackOverflow https://stackoverflow.com/questions/574392

문제

나는 양식 제출 후에 제대로 입력되지 않은 입력 필드를 강조하고 싶은 웹 양식으로 작업하고 있습니다.

내가 만들고 싶은 하이라이트 효과는 끝없이 반복되는 애니메이션입니다. 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/ (지금 죽은 링크)

나는 펄스가 당신이 요구했던 것이라고 생각하지만, 어떤 경우에는주의를 기울이는 것도 유용 할 수 있습니다.

여기에 매우 있습니다 기초 샘플 I 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 펄스에 입력 할 수 있습니다.

다음은 내가하는 방법입니다 (일반 단계) :

  1. 입력을 통한 루프, 해당 필드에 클래스 "잘못된"클래스 추가
  2. 루핑하는 동안 "부정확 한"클래스의 BG 토글, 그러나 오랫동안 잠을 자십시오.
  3. 입력을 클릭하면 "잘못된"클래스를 제거하십시오.

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

});

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top