الطريقة الصحيحة لتحريك الصناديق مع jQuery

Question

وهو بناء الجملة الصحيح لتحريك مربع الشادو الممتلكات مع jQuery؟

$().animate({?:"0 0 5px #666"});

Answer 1

إجابة مباشرة

باستخدام إدوين مارتن jQuery Plugin for Shadow Animation, الذي يمتد .animate الطريقة ، يمكنك ببساطة استخدام بناء الجملة العادي مع "boxshadow" وكل جانب من جوانب ذلك - اللون, ، ال x- و y الإيقاف, ، ال طمس راديوس و انتشار راديوس - يحصل على الرسوم المتحركة. ويشمل دعم الظل المتعدد.

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}); 

---

باستخدام الرسوم المتحركة CSS بدلاً من ذلك

jQuery المتحركة عن طريق تغيير style خاصية عناصر DOM ، والتي يمكن أن تسبب مفاجآت مع خصوصية وتنقل معلومات النمط من أوراق الأنماط الخاصة بك.

لا يمكنني العثور على إحصائيات دعم المتصفح لـ CSS Shadow Animation ، ولكن قد تفكر في استخدام jQuery لتطبيق الرسوم المتحركة صف دراسي بدلا من التعامل مع الرسوم المتحركة مباشرة. على سبيل المثال ، يمكنك تحديد الرسوم المتحركة للمربع في ورقة الأنماط الخاصة بك:

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

يمكنك بعد ذلك استخدام الأم animationend حدث لمزامنة نهاية الرسوم المتحركة مع ما كنت تفعله في رمز JS الخاص بك:

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});

Answer 2

إذا كنت تستخدم JQuery 1.4.3+ ، فيمكنك الاستفادة من رمز CSShooks الذي تمت إضافته.

باستخدام خطاف boxshadow: https://github.com/brandonaaron/jquery-csshooks/blob/master/boxshadow.js

يمكنك أن تفعل شيئًا كهذا:

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

لا يتيح لك الخطاف تحريك اللون حتى الآن ، لكنني متأكد من بعض الأعمال التي يمكن إضافتها.

مثال: http://jsfiddle.net/petersendidit/w5aan/

Answer 3

إذا كنت لا ترغب في استخدام البرنامج المساعد ، فيمكن القيام به مع القليل من CSS:

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

تحقق من ذلك: http://jsfiddle.net/z8e5u/

إذا كنت تريد وثائق كاملة على الرسوم المتحركة CSS ، طريقك إلى السحرة يبدأ هنا ..

Answer 4

أنا أحب حل Shanesauce! استخدم فئة من المعرف ويمكنك إضافة/إزالة التأثير إلى أي عنصر باستخدام jQuery AddClass/Delay/RemoveClass:

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});

Answer 5

فيما يلي مثال على كيفية القيام بذلك بدون مكون إضافي: صندوق الرسوم المتحركة jQuery لكن لا تحتوي على الوظائف الإضافية التي تأتي مع استخدام البرنامج المساعد ، لكني شخصياً أحب أن أرى (وفهم) الطريقة وراء الجنون.