واحد. تظهر ، إخفاء
طريقة العرض في jQuery هي: .show () والطريقة المخفية هي: .hide (). عندما لا تكون هناك معلمات ، من الصعب عرض المحتوى وإخفاءه.
دولار (' $ ('. Hide'). انقر فوق (function () {// set trigger events $ ('#box'). Hide () ؛ // Hide}) ؛في طرق .show () و .hide () ، يمكن تمرير المعلمة ، والتي تتحكم في السرعة بالميلي ثانية (1000 مللي ثانية تساوي ثانية واحدة). كما أنه غني بالسرعة الثابتة للزيادة والانخفاض ، وكذلك تغيير الشفافية.
$ ('. show'). انقر فوق (function () {$ ('#box'). show (1000) ؛ // استغرق الأمر ثانية واحدة لعرض}) ؛ دولار ('بالإضافة إلى استخدام Milliseconds مباشرة للتحكم في السرعة ، يوفر JQuery أيضًا ثلاثة سلاسل معلمة السرعة المسبقة: بطيئة ، عادية وسريعة ، تقابل 600 مللي ثانية و 400 مللي ثانية و 200 مللي ثانية على التوالي.
$ ('#box'). show ('Slow') ؛ // 600 milliseconds $ ('#box'). show ('normal') ؛ // 400 milliseconds $ ('#box'). show ('fast') ؛ // 200 ميلي ثانيةملاحظة: ما إذا كانت تمر ميلي ثانية أو تمرير سلاسل مسبقًا ، إذا قمت بتمرير خطأ أو تمرير سلسلة فارغة. ثم سيستغرق القيمة الافتراضية: 400 مللي ثانية.
استخدم وظائف رد الاتصال لـ .show () و .hide () لتحقيق تأثيرات الرسوم المتحركة في قائمة الانتظار.
(1) اتصل بنفسك باستخدام اسم الوظيفة
دولار ('(2) استخدم الوسائط
دولار ('عندما نستخدم .show () و .hide () ، إذا كنا بحاجة إلى زر للتبديل ، نحتاج إلى إصدار بعض الأحكام المشروطة. ويوفر لنا jQuery طريقة منفصلة مع وظائف مماثلة: .toggle ().
$ ('. toggle'). انقر فوق (function () {$ (this) .Toggle ('slow') ؛}) ؛اثنين. يوفر Slide and Scroll jQuery مجموعة من الطرق لتغيير ارتفاع العناصر: .slideup () و .slidedown () و .slidetoggle (). كما يوحي الاسم ، يتقلص صعودًا (مخطوطات) ويتوسع لأسفل (الشرائح).
$ ('. down'). انقر فوق (function () {// swipe down $ ('#box'). slidedown () ؛}) ؛ $ ('. Up'). انقر فوق (function () {// swipe $ $ ('#box'). slideup () ؛ملاحظة: تكون تأثيرات الانزلاق والتمرير هي نفسها الآثار المخفية والتأثيرات المخفية ، ولها نفس المعلمات.
ثلاثة. تتلاشى ، تتلاشى
يوفر jQuery مجموعة من الأساليب على وجه التحديد لتغييرات الشفافية: .fadein () و .fadeout () ، والتي تمثل التلاشي وتتلاشى على التوالي ، وبالطبع هناك طريقة تبديل تلقائية: .fadetoggle ().
$ ('. in'). انقر فوق (function () {// fake in $ ('#box'). fadein ('Slow') ؛}) ؛ $ ('. Out'). انقر فوق (function () {// fake $ $ ('#box'). fadeout ('slow') ؛ }) ؛لا يمكن أن تكون طرق الشفافية الثلاثة أعلاه فقط من 0 إلى 100 ، أو من 100 إلى 0. إذا أردنا ضبط القيمة المحددة ، فلا توجد طريقة. يوفر jQuery طريقة .fadeto () لحل هذه المشكلة.
$ ('. toggle'). انقر فوق (function () {$ ('#box'). fadeto ('Slow' ، 0.33) ؛ //0.33 تعني القيمة 33 ٪}) ؛ملاحظة: عدد القيم هو 0 إلى 1 ، يتوافق مع النسبة المئوية
أربعة. الرسوم المتحركة المخصصة
يوفر jQuery العديد من جوانب الرسوم المتحركة الثابتة البسيطة والمتطالبة التي نستخدمها. لكن في بعض الأحيان ، لا يمكن أن تلبي هذه الرسوم المتحركة البسيطة احتياجاتنا الأكثر تعقيدًا. في هذا الوقت ، يوفر JQuery طريقة .animate () لإنشاء الرسوم المتحركة المخصصة لدينا لتلبية متطلبات أكثر تعقيدًا ومتغيرة.
$ ('. ANIMATE'). انقر فوق (function () {$ ('#box'). ANIMATE ({'width': '300px' ، 'fontsize': '50px' ، 'opabity': 0.5}) ؛}) ؛ملاحظة: تغيير CSS هو تأثير الرسوم المتحركة. في المثال أعلاه ، هناك بالفعل أربعة تغييرات CSS ، وقد تم تحقيق تأثير الحركة المتزامنة للرسوم المتحركة المتعددة.
لا يوجد سوى معلمة واحدة يجب تمريرها ، وهي كائن ذو نمط CSS الزوجي. هناك معلمتان اختياريتان ، وهما وظائف السرعة والاتصال.
$ ('.حتى الآن ، أنشأنا رسومًا متحركة مع مواقف ثابتة لا تزال. إذا كنت ترغب في تنفيذ صور Motion Pictures في حالات الحركة ، فيجب عليك استخدام الرسوم المتحركة المخصصة ودمجها مع وظيفة تحديد المواقع المطلقة لـ CSS.
$ ('. ANIMATE'). انقر فوق (function () {$ ('#box'). ANIMATE ({'top': '300px' ، // يجب تعيين تحديد المواقع المطلقة لـ css أولاً 'Left': '200px'}) ؛}) ؛ملاحظة: يجب تعيين الكائن المرجعي أولاً في CSS ، وتحديد المواقع المطلقة
في الرسوم المتحركة المخصصة ، يجب أن تكون كل حركة بدء في الموضع الأولي أو الحالة الأولية ، وأحيانًا نريد تحريكها من خلال الوضع الحالي أو الحالة. يوفر jQuery وظائف إضافة وتقليل الرسوم المتحركة المخصصة.
$ ('. ANIMATE'). انقر فوق (function () {$ ('#box'). ANIMATE ({left: '+= 100px' ، width: '+= 100px' ، height: '+= 100px'}) ؛}) ؛خمسة. طريقة الانتظار الرسوم المتحركة
يمكننا بالفعل تنفيذ الرسوم المتحركة في قائمة الانتظار من قبل. إذا كان نفس العنصر ، فيمكن استدعاؤه بالتسلسل أو المتسلسل. إذا كان عنصرًا مختلفًا ، فيمكنك استخدام وظيفة رد الاتصال. ولكن في بعض الأحيان يكون هناك الكثير من الرسوم المتحركة في قائمة الانتظار ، ويتم تقليل قابلية قراءة وظيفة رد الاتصال بشكل كبير. تحقيقًا لهذه الغاية ، توفر JQuery مجموعة من الطرق المستخدمة خصيصًا للرسوم المتحركة في قائمة الانتظار.
// لا يمكن تنفيذ Connection في قائمة انتظار التسلسل
$ ('#box'). slideup ('Slow'). Slidedown ('Slow'). css ('Background' ، 'Orange') ؛
ملاحظة: إذا كانت طريقة الرسوم المتحركة متحركة ، فيمكن وضع الرباط في قائمة الانتظار بالتسلسل ، في حين أن طريقة .css () ليست طريقة للرسوم المتحركة وستكون قبل تمرير قائمة الانتظار أولاً. بعد ذلك ، يمكن استخدام وظيفة رد الاتصال طريقة الرسوم المتحركة لحل المشكلة.
// استخدم وظيفة رد الاتصال لفرض قائمة انتظار طريقة .css () إلى .slidedown () بعد $ ('#box'). slideup ('Slow'). Slidedown ('Slow' ، function ({$ (this) .css ('background' ، 'Orange') ؛}) ؛ولكن إذا كان هذا هو الحال ، عندما يكون هناك العديد من الرسوم المتحركة في قائمة الانتظار ، فلن تنخفض قابلية القراءة فحسب ، بل إن طريقة الرسوم المتحركة الأصلية غير واضحة بما فيه الكفاية. لذلك ، فكرتنا هي أن كل عملية هي طريقة مستقلة خاصة بها. ثم يوفر jQuery طريقة مشابهة لوظيفة رد الاتصال: .queue ().
// استخدم طريقة .queue () لمحاكاة طريقة الرسوم المتحركة بعد اتباع طريقة الرسوم المتحركة $ ('#box'). slideup ('Slow'). Slidedown ('Slow'). Queue (function () {$ (this) .css ('background' ، 'Orange') ؛}) ؛الآن ، نريد الاستمرار في إضافة الرسوم المتحركة الخفية إلى طريقة .queue () ، لكن وجدنا أنه من المستحيل تنفيذها. هذا ناتج عن ميزة .queue (). الحل: يمكن أن تمر وظيفة رد الاتصال لـ jQuery's .queue () معلمة ، وهي الوظيفة التالية. استدعاء هذه الطريقة التالية () في النهاية لتنفيذ الرسوم المتحركة في قائمة الانتظار.
// استخدم المعلمة التالية لتنفيذ الرسوم المتحركة المستمرة لاستدعاء المكالمات $ ('#box'). slideup ('Slow'). Slidedown ('Slow'). قائمة الانتظار (الوظيفة (التالية {$ (this) .css ('Background' ، 'Orange') ؛ next () ؛}). إخفاء ('Slow') ؛PS: .queue () طريقة أيضًا وظيفة أخرى ، وهي الحصول على طول قائمة انتظار الرسوم المتحركة الحالية (غير موضح بالتفصيل)
يوفر jQuery أيضًا طريقة وظيفية لتنظيف قوائم الانتظار: .clearqueue (). ضعها في وظيفة رد الاتصال في قائمة الانتظار أو طريقة .queue () ، ويمكن إزالة قوائم الانتظار المتبقية التي يتم تنفيذها.
// تنظيف قائمة انتظار الرسوم المتحركة $ ('#box'). slidedown ('Slow' ، function () {$ (this) .clearqueue ()}) ؛ ستة. طرق متعلقة بالرسوم المتحركة
في كثير من الأحيان ، من الضروري إيقاف تشغيل الرسوم المتحركة ، ويوفر jQuery طريقة. Stop () لهذا الغرض. لديها معلمتان اختياريتان: .stop (clearqueue ، gotoend) ؛ يمرر ClearQueue قيمة منطقية ، والتي تمثل ما إذا كان سيتم مسح قائمة انتظار الرسوم المتحركة غير المخللة ، ويمثل Gotoend ما إذا كان يجب القفز مباشرة على الرسوم المتحركة المنفذة إلى الحالة الأخيرة.
$ ('. ANIMATE'). انقر فوق (function () {$ ('#box'). ANIMATE ({'left': '300px'} ، 1000) ؛ $ ('#box'). animate ({'top': '300px'} ، 1000) ؛ $ ('#box'). $ ('#box'). ANIMATE ({'height': '300px'} ، 1000) ؛ $ ('. stop'). انقر فوق (function () {$ ('#box'). stop (true ، false) ؛}) ؛) إذا كانت المعلمة صحيحة ، فسيتم إلغاء الرسوم المتحركة في قائمة الانتظار اللاحقة عندما تكون هناك رسوم متحركة في قائمة الانتظار. تشير المعلمة الثانية إلى ما إذا كانت تصل إلى نهاية الرسوم المتحركة الحالية ، والافتراضيات خاطئة. إذا كانت المعلمة صحيحة ، فستصل إلى النهاية مباشرة بعد التوقف. يمكنك نسخها وتجربتها بنفسك.
في بعض الأحيان عند تنفيذ الرسوم المتحركة أو الرسوم المتحركة في قائمة الانتظار ، هناك تأخير قبل الحركة ، ويوفر jQuery طريقة .delay () لهذا الغرض. يمكن أن تضع هذه الطريقة تأخيرًا قبل الرسوم المتحركة أو إضافتها في منتصف الرسوم المتحركة في قائمة الانتظار.
. "العرض": '300px'} ، 1000) ؛
يتم تشغيل الوسيطات. callee في أي وظيفة تمثل الوظيفة. تستخدم عموما في وظائف مجهولة. في الوظائف المجهولة ، تحتاج أحيانًا إلى استدعاء نفسك ، ولكن لأنها وظيفة مجهولة ، لا تحتوي على اسم وقابل للتعديل. في هذا الوقت ، يمكن استخدام الحجج. callee بدلاً من وظائف مجهولة
// تنفيذ Self -Infinite Loop بشكل متكرر $ ('#box'). slidetoggle ('Slow' ، function () {$ (this) .slidetoggle ('slow' ، enduces.callee) ؛}) ؛يمكن أن تقوم خاصية $ .fx.off بإيقاف تشغيل جميع تأثيرات الرسوم المتحركة.
$ .fx.off = true ؛ // الافتراضي كاذب
جميعهم مفهومة.
ما سبق هو مشاركة رمز تأثير الرسوم المتحركة jQuery المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك.