أثر jQuery - التحرك

يسمح لك jQuery animate() بإنشاء حركة مخصصة.

عرض التأثير



jQuery

jQuery - طريقة animate()

يستخدم jQuery animate() لإنشاء حركة مخصصة.

النحو:

$(selector).animate({params},speed,callback);

مطلوب params يحدد هذا السطر الخاصية CSS التي تشكل الحركة.

اختياري speed يحدد هذا السطر وقت تأثير الحركة. يمكن أن تأخذ القيم التالية: "slow"، "fast" أو الألفات.

اختياري callback السطر هو اسم الدالة التي سيتم تنفيذها بعد اكتمال الحركة.

في هذا المثال، يُظهر animate() تطبيقًا بسيطًا؛ يتحرك العنصر <div> إلى اليسار حتى يصبح خاصية left تساوي 250 بكسل:

المثال

$("button").click(function(){
  $("div").animate({left:'250px'});
);

جرب بنفسك

نصيحة:بالتشخيص، جميع عناصر HTML لها موقع ثابت لا يمكن تحريكها.

إذا كنت تريد تحريك الموقع، تذكر أولاً تعيين خاصية position للعنصر CSS على relative أو fixed أو absolute!

jQuery animate() - تحريك عدة خصائص

لاحظ أن يمكنك استخدام عدة خصائص في عملية إنشاء الحركة:

المثال

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

جرب بنفسك

نصيحة:هل يمكن استخدام animate() لتحريك جميع خصائص CSS؟

نعم، تقريباً يمكن ذلك! ولكن يجب تذكر شيء مهم: عند استخدام animate()، يجب استخدام Camel Case لكل اسم الخاصية، مثل، يجب استخدام paddingLeft بدلاً من padding-left، marginRight بدلاً من margin-right، وما إلى ذلك.

في نفس الوقت، لا تحتوي أنماط الألوان على مكتبة jQuery الأساسية.

إذا كنت بحاجة إلى إنشاء أنماط ألوان، فعليك تنزيل إضافة Color Animations من jQuery.com.

jQuery animate() - استخدام القيم المتغيرة

يمكنك أيضًا تعريف القيم المتغيرة (القيم تتم مقارنتها مع القيمة الحالية للعنصر). يجب ألا تُضاف أي شيء قبل القيمة. يمكن استخدام += أو -=:

المثال

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

جرب بنفسك

jQuery animate() - استخدام القيم المسبقة

يمكنك أيضًا تعيين قيمة التحرك للخصائص كـ "show" أو "hide" أو "toggle":

المثال

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

جرب بنفسك

jQuery animate() - استخدام وظيفة الصفوف

بالافتراض، يقدم jQuery وظيفة صفوف مخصصة للأنماط.

هذا يعني إذا كتبت عدة نداءات animate() بعد بعضها البعض، فإن jQuery سينشئ "صفوفًا داخليًا" تحتوي على هذه النداءات. ثم تشغيل هذه النداءات بشكل فردي.

المثال 1

إخفاء، إذا كنت ترغب في تنفيذ أنماط مختلفة بعد بعضها البعض، فإنه يجب علينا استخدام وظيفة الصفوف:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

جرب بنفسك

المثال 2

في المثال التالي، يتم تحريك عناصر <div> إلى اليمين وزيادة حجم النص:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

جرب بنفسك