jQuery 3.3

.animate()




jquery

.animate (الخصائص [، المدة] [، التخفيف] [، كاملة]) الإرجاع: jQuery

الوصف ؛: إجراء رسم متحرك مخصص لمجموعة من خصائص CSS.

  • وأضاف الإصدار: 1.0 .animate (خصائص [، المدة] [، تخفيف] [، كاملة])

    • الخصائص
      اكتب: PlainObject
      كائن من خصائص CSS والقيم التي سينتقل إليها الرسم المتحرك.
    • المدة (الافتراضية: 400 )
      النوع: Number أو String
      سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
    • تخفيف (الافتراضي: swing )
      اكتب: String
      سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
    • اكتمال
      النوع: Function ()
      هي وظيفة يتم الاتصال بها بمجرد اكتمال الرسوم المتحركة ، ويُطلق عليها مرة واحدة لكل عنصر متطابق.
  • الإصدار المضافة: 1.0 .animate (خصائص ، خيارات)

    • الخصائص
      اكتب: PlainObject
      كائن من خصائص CSS والقيم التي سينتقل إليها الرسم المتحرك.
    • خيارات
      اكتب: PlainObject
      خريطة للخيارات الإضافية لتمريرها إلى الطريقة.
      • المدة (الافتراضية: 400 )
        النوع: Number أو String
        سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
      • تخفيف (الافتراضي: swing )
        اكتب: String
        سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
      • قائمة الانتظار (الافتراضي: true )
        النوع: Boolean أو String
        A Boolean تشير إلى ما إذا كان لوضع الرسوم المتحركة في قائمة انتظار التأثيرات. إذا كانت غير صحيحة ، فسيبدأ الرسم المتحرك على الفور. بدءًا من jQuery 1.7 ، يمكن أيضًا أن يقبل خيار قائمة الانتظار سلسلة ، وفي هذه الحالة تتم إضافة الرسم المتحرك إلى قائمة الانتظار التي تمثلها تلك السلسلة. عند استخدام اسم قائمة انتظار مخصصة لا يبدأ الرسم المتحرك تلقائيًا ؛ يجب عليك الاتصال .dequeue("queuename") لبدء تشغيله.
      • specialEasing
        اكتب: PlainObject
        عنصر يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيطة الخصائص ووظائف تسهيلاتها المقابلة. (النسخة المضافة: 1.4 )
      • خطوة
        النوع: Function ( Number الآن ، Tween توين)
        دالة يجب استدعاؤها لكل خاصية متحركة لكل عنصر متحرك. توفر هذه الوظيفة فرصة لتعديل الكائن Tween لتغيير قيمة الخاصية قبل تعيينها.
      • تقدم
        النوع: Function ( Promise الرسوم المتحركة ، تقدم Number ، Number متبقي)
        دالة يجب استدعاؤها بعد كل خطوة من الرسوم المتحركة ، مرة واحدة فقط لكل عنصر متحرك بغض النظر عن عدد الخصائص المتحركة. (النسخة المضافة: 1.8 )
      • اكتمال
        النوع: Function ()
        دالة تسمى بمجرد اكتمال الرسوم المتحركة على عنصر.
      • بداية
        النوع: Function ( Promise الرسوم المتحركة)
        دالة يتم الاتصال بها عندما يبدأ الرسم المتحرك على عنصر ما. (النسخة المضافة: 1.8 )
      • فعله
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يجب استدعائها عند اكتمال الرسوم المتحركة على عنصر (يتم حل كائن Promise). (النسخة المضافة: 1.8 )
      • فشل
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يتم استدعاؤها عندما يفشل إكمال الرسم المتحرك على عنصر (يتم رفض الكائن Promise الخاص به). (النسخة المضافة: 1.8 )
      • دائما
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        هي دالة يجب استدعاؤها عندما يكتمل الرسم المتحرك على عنصر أو يتوقف دون إتمامه (إما أن يكون كائن Promise قد تم حله أو رفضه). (النسخة المضافة: 1.8 )

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

خصائص الحركة والقيم

يجب تحريك كل الخصائص المتحركة إلى قيمة رقمية واحدة ، باستثناء ما هو مذكور أدناه ؛ لا يمكن تحريك معظم الخصائص غير الرقمية باستخدام وظيفة jQuery الأساسية (على سبيل المثال ، يمكن تحريك width أو height أو left ولكن background-color لا يمكن أن يكون ، ما لم يتم استخدام المكون الإضافي jQuery.Color ). يتم التعامل مع قيم الخاصية على أنها عدد من وحدات البكسل ما لم يتم تحديد خلاف ذلك. يمكن تحديد الوحدات em و % عند الاقتضاء.

بالإضافة إلى خصائص النمط ، يمكن scrollLeft بعض الخصائص غير scrollLeft مثل scrollLeft و scrollLeft ، بالإضافة إلى الخصائص المخصصة.

لا يتم دعم خصائص CSS المختصرة (مثل الخط ، الخلفية ، الحدود) بشكل كامل. على سبيل المثال ، إذا كنت ترغب في تحريك عرض الحدود التي تم عرضها ، فيجب تعيين نمط حد على الأقل وعرض الحدود غير "تلقائي" مسبقًا. أو إذا كنت تريد تحريك حجم الخط ، fontSize أو CSS مكافئًا 'font-size' بدلاً من 'font' ببساطة.

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

يمكن أن تكون الخصائص المتحركة نسبيًا أيضًا. إذا تم توفير قيمة بـ += أو -= تسلسل للأحرف ، فسيتم حساب القيمة المستهدفة عن طريق إضافة أو استقطاع الرقم المحدد من القيمة الحالية للعقار.

ملاحظة: على عكس أساليب الرسوم المتحركة .slideDown() مثل .slideDown() و .fadeIn() ، فإن الطريقة .fadeIn() لا تجعل العناصر المخفية مرئية كجزء من التأثير. على سبيل المثال ، بالنظر إلى $( "someElement" ).hide().animate({height: "20px"}, 500) ، سيتم تشغيل الرسم المتحرك ، ولكن سيبقى العنصر مخفيًا .

المدة الزمنية

يتم إعطاء المدد بالمللي ثانية. تشير القيم الأعلى إلى الرسوم المتحركة الأبطأ ، وليس الصور الأسرع. المدة الافتراضية هي 400 ميلي ثانية. يمكن توفير السلاسل 'fast' و 'slow' للإشارة إلى الفترات من 200 و 600 ميلي ثانية ، على التوالي.

وظائف رد الاتصال

إذا تم توفيره ، فيتم استدعاء start ، step ، progress ، done ، fail ، always الاستدعاءات على أساس كل عنصر . تم تعيين this على عنصر DOM الذي يتم تحريكه. في حالة عدم وجود عناصر في المجموعة ، لا يتم استدعاء أي عمليات رد اتصال. في حالة تحريك عناصر متعددة ، يتم تنفيذ معاودة الاتصال مرة واحدة لكل عنصر متطابق ، وليس مرة واحدة للرسوم المتحركة ككل. استخدم طريقة .promise() للحصول على وعد يمكنك إرفاقه .promise() التي تطلق مرة واحدة لمجموعة متحركة بأي حجم ، بما في ذلك العناصر الصفرية.

الاستخدام الأساسي

لتحريك أي عنصر ، مثل صورة بسيطة:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;">

لتحريك العتامة وإزاحة اليسار وارتفاع الصورة في آنٍ واحد:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

الشكل 1 - رسم توضيحي لتأثير الرسوم المتحركة المحدد

لاحظ أن القيمة المستهدفة لخاصية height هي 'toggle' . بما أن الصورة كانت مرئية من قبل ، فإن الرسوم المتحركة تقلل الارتفاع إلى 0 لإخفائه. نقرة ثانية ، يعكس هذا الانتقال:

الشكل 2 - رسم توضيحي لتأثير الرسوم المتحركة المحدد

إن opacity الصورة موجودة بالفعل في قيمتها المستهدفة ، لذلك لا يتم تحريك هذه الخاصية عن طريق النقرة الثانية. نظرًا لأن القيمة المستهدفة left هي قيمة نسبية ، فإن الصورة تتحرك إلى مسافة أبعد من اليمين خلال هذا الرسم المتحرك الثاني.

لا تملك الخصائص الاتجاهية ( top ، right ، bottom ، left ) أي تأثير ملحوظ على العناصر إذا كانت خاصية نمط position static ، والتي تكون بشكل افتراضي.

ملاحظة: يمتد مشروع jQuery UI للأسلوب .animate() عن طريق السماح ببعض الأنماط غير الرقمية مثل الألوان المتحركة. يتضمن المشروع أيضًا آليات لتحديد الرسوم المتحركة من خلال صفوف CSS بدلاً من السمات الفردية.

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

وظيفة الخطوة

يوفر الإصدار الثاني من .animate() خيار step - وظيفة رد اتصال يتم تشغيلها في كل خطوة من الحركة. هذه الوظيفة مفيدة لتمكين أنواع الرسوم المتحركة المخصصة أو تغيير الرسوم المتحركة أثناء حدوثها. وهي تقبل الوسيطتين ( now و fx ) ، ويتم تعيينها على عنصر DOM الذي يتم تحريكه.

  • now : القيمة الرقمية للممتلكات التي يتم تحريكها في كل خطوة
  • fx : مرجع إلى كائن نموذج jQuery.fx ، والذي يحتوي على عدد من الخصائص مثل elem للعنصر المتحرك ، start end للقيمة الأولى والأخيرة للخاصية المتحركة ، على التوالي ، prop الخاصية التي يتم تحريكها.

لاحظ أنه يتم استدعاء الدالة step لكل خاصية متحركة على كل عنصر متحرك. على سبيل المثال ، في ضوء عنصرين من القائمة ، يتم step وظيفة step أربع مرات في كل خطوة من الرسم المتحرك:

$( "li" ).animate({
  opacity: .5,
  height: "50%"
}, {
  step: function( now, fx ) {
    var data = fx.elem.id + " " + fx.prop + ": " + now;
    $( "body" ).append( "<div>" + data + "</div>" );
  }
});

تخفيف

المعلمة المتبقية من .animate() هي سلسلة تسمية دالة تخفيف لاستخدام. تحدد وظيفة التيسير السرعة التي يتقدم بها الرسم المتحرك في نقاط مختلفة داخل الرسم المتحرك. تعتبر تطبيقات التخفيف الوحيدة في مكتبة jQuery هي الإعداد الافتراضي ، وتدعى swing ، والتطبيق الذي يتقدم بخطى ثابتة تسمى linear . تتوفر المزيد من وظائف التخفيف مع استخدام المكونات الإضافية ، وعلى الأخص جناح jQuery UI .

كل خاصية تخفيف

اعتبارًا من الإصدار jQuery 1.4 ، يمكنك تعيين وظائف التخفيف لكل خاصية داخل مكالمة واحدة .animate() . .animate() . في الإصدار الأول من .animate() ، يمكن أن تأخذ كل خاصية مصفوفة كقيمة: أول عضو في الصفيف هو خاصية CSS والعضو الثاني عبارة عن وظيفة تخفيف. إذا لم يتم تعريف وظيفة التخفيف لكل خاصية لخاصية معينة ، فإنها تستخدم قيمة الوسيطة .animate() الاختيارية لـ .animate() . إذا لم يتم تحديد وسيطة التيسير ، يتم استخدام وظيفة swing الافتراضية.

على سبيل المثال ، لتحريك العرض والارتفاع في آنٍ واحد مع وظيفة التخفيف swing والعتامة مع وظيفة التخفيف linear :

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});

في الإصدار الثاني من .animate() ، يمكن أن يشتمل كائن الخيارات على خاصية specialEasing ، والتي تعد في حد ذاتها عنصرًا لخصائص CSS specialEasing المقابلة. على سبيل المثال ، في نفس الوقت تحريك العرض باستخدام وظيفة التخفيف linear والارتفاع باستخدام وظيفة تخفيف تخفيف easeOutBounce :

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});

كما لوحظ سابقا ، مطلوب البرنامج المساعد لوظيفة easeOutBounce .

ملاحظات إضافية:

  • يمكن إيقاف تشغيل جميع تأثيرات jQuery ، بما في ذلك .animate() ، عالميًا عن طريق تعيين jQuery.fx.off = true ، والذي يقوم بضبط المدة إلى 0. لمزيد من المعلومات ، راجع jQuery.fx.off .

أمثلة:

انقر فوق الزر لتحريك div مع عدد من الخصائص المختلفة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
 
<script>
// Using multiple unit types within one animation.
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
 
</body>
</html>

عرض:

يتحكم في خاصية اليسار في div ذات القيمة النسبية. انقر فوق عدة مرات على الأزرار لرؤية الرسوم المتحركة النسبية في قائمة الانتظار.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block"></div>
 
<script>
$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
 
</body>
</html>

عرض:

يُظهر الزر الأول كيفية عمل حركة متحركة غير مقيدة. إنه يوسع العرض إلى عرض 90٪ بينما يزيد حجم الخط. بمجرد اكتمال تغيير حجم الخط ، سيبدأ رسم الحدود. يبدأ الزر الثاني في رسم متحرك متسلسل تقليدي ، حيث يبدأ كل رسم متحرك بمجرد اكتمال الرسوم المتحركة السابقة على العنصر.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 200px;
    height: 1.1em;
    text-align: center;
    border: 2px solid green;
    margin: 3px;
    font-size: 14px;
  }
  button {
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
 
<script>
$( "#go1" ).click(function() {
  $( "#block1" )
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function() {
  $( "#block2" )
    .animate({ width: "90%" }, 1000 )
    .animate({ fontSize: "24px" }, 1000 )
    .animate({ borderLeftWidth: "15px" }, 1000 );
});
 
$( "#go3" ).click(function() {
  $( "#go1" ).add( "#go2" ).click();
});
 
$( "#go4" ).click(function() {
  $( "div" ).css({
    width: "",
    fontSize: "",
    borderWidth: ""
  });
});
</script>
 
</body>
</html>

عرض:

يقوم بتحريك الخاصية اليسرى الأولى للدفعة ويقوم بمزامنة divs المتبقية ، باستخدام الدالة step لتعيين خصائصها اليسرى في كل مرحلة من الرسم المتحرك.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
 
<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>
 
</body>
</html>

عرض:

تحريك جميع الفقرات للتبديل بين كل من الارتفاع والتعتيم ، واستكمال الرسوم المتحركة في غضون 600 جزء من الثانية.

$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, "slow" );

تحريك جميع الفقرات إلى نمط يسار من 50 و عتامة 1 (معتمة ، مرئية) ، إكمال الرسم المتحرك خلال 500 ميلي ثانية.

$( "p" ).animate({
  left: 50,
  opacity: 1
}, 500 );

تحريك خصائص نمط اليسار والعتامة لكل الفقرات ؛ قم بتشغيل الرسم المتحرك خارج قائمة الانتظار ، بحيث يتم تشغيله تلقائيًا دون انتظار دوره.

$( "p" ).animate({
  left: "50px",
  opacity: 1
}, {
  duration: 500,
  queue: false
});

مثال على استخدام وظيفة "التيسير" لتوفير نمط مختلف من الرسوم المتحركة. سيعمل هذا فقط إذا كان لديك مكون إضافي يوفر وظيفة التخفيف هذه. لاحظ أن هذا الرمز لن يفعل شيئًا ما لم يتم إخفاء عنصر الفقرة.

$( "p" ).animate({
  opacity: "show"
}, "slow", "easein" );

يقوم بتحريك جميع الفقرات للتبديل بين كل من الارتفاع والتعتيم ، وإكمال الرسم المتحرك خلال 600 جزء من الثانية.

$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, {
  duration: "slow"
});

استخدم وظيفة تخفيف لتوفير نمط مختلف من الرسوم المتحركة. سيعمل هذا فقط إذا كان لديك مكون إضافي يوفر وظيفة التخفيف هذه.

$( "p" ).animate({
  opacity: "show"
}, {
  duration: "slow",
  easing: "easein"
});

تحريك جميع الفقرات وتنفيذ وظيفة رد اتصال عند اكتمال الرسوم المتحركة. تعتبر الوسيطة الأولى عبارة عن كائن لخصائص CSS ، بينما يحدد الثاني أن الرسوم المتحركة يجب أن تستغرق 1000 ميلي ثانية لإكمالها ، والثالث ينص على نوع التخفيف ، والوسيطة الرابعة عبارة عن وظيفة رد اتصال مجهولة.

$( "p" ).animate({
  height: 200,
  width: 400,
  opacity: 0.5
}, 1000, "linear", function() {
  alert( "all done" );
});