مثال
"تحريك" عنصر، عن طريق تغيير ارتفاعه:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
انها محاولة لنفسك » تعريف واستخدام
و animate() طريقة بأداء حركة مخصصة لمجموعة من الخصائص CSS.
يتغير هذا الأسلوب عنصرا من دولة إلى أخرى مع أنماط CSS. يتم تغيير قيمة العقار CSS تدريجيا، لإنشاء تأثير الرسوم المتحركة.
قيم رقمية فقط يمكن أن تكون متحركة (مثل "margin:30px" ). قيم السلسلة لا يمكن أن تكون متحركة (مثل "background-color:red" )، باستثناء السلاسل "show", "hide" و "toggle" . هذه القيم تسمح يختبئ ويظهر العنصر المتحركة.
نصيحة: يمكنك استخدام "+=" "-=" "+=" "-=" لالمتحركة النسبية.
بناء الجملة
(selector).animate({styles},speed,easing,callback)| معامل | وصف |
|---|---|
| styles | مطلوب. يحدد واحدة أو أكثر من الخصائص CSS / القيم لتنشيط. ملاحظة: أسماء الملكية يجب أن تكون الإبل فتش عند استخدامها مع animate() الأسلوب: سوف تحتاج لكتابة paddingLeft بدلا من اليسار الحشو، marginRight بدلا من الهامش الأيمن، وهلم جرا. الخصائص التي يمكن أن تكون متحركة:
قيم رقمية فقط يمكن أن تكون متحركة (مثل "margin:30px" ). قيم السلسلة لا يمكن أن تكون متحركة (مثل "background-color:red" )، باستثناء السلاسل "show", "hide" و "toggle" . هذه القيم تسمح يختبئ ويظهر العنصر المتحركة. لم يتم تضمينها الرسوم المتحركة اللون في المكتبة مسجالأساسية: نصيحة.إذا كنت ترغب في تحريك اللون، تحتاج إلى تحميل البرنامج المساعد اللون صور متحركة من jQuery.com |
| speed | اختياري. تحدد سرعة الحركة. القيمة الافتراضية هي 400 ميلي ثانية القيم الممكنة:
|
| easing | اختياري. تحدد سرعة عنصر في نقاط مختلفة من الرسوم المتحركة. القيمة الافتراضية هي "swing" . القيم الممكنة:
|
| callback | اختياري. وظيفة ليتم تنفيذها بعد اكتمال الرسوم المتحركة. لمعرفة المزيد حول رد، يرجى قراءة مسج استدعاء الفصل |
بديل بناء الجملة
(selector).animate({styles},{options})| معامل | وصف |
|---|---|
| styles | مطلوب. يحدد واحدة أو أكثر من الخصائص CSS / القيم لتحريك (انظر القيم الممكنة أعلاه) |
| options | اختياري. يحدد خيارات إضافية للرسوم المتحركة. القيم الممكنة:
|
انها محاولة لنفسك - أمثلة
عن طريق animate() مع دالة رد
كيفية استخدام animate() مع وظيفة الاستدعاء أن يكرر الرسوم المتحركة.
بديل بناء الجملة مثال
باستخدام بناء الجملة بديل لتحديد أنماط الرسوم المتحركة متعددة والخيارات.
عن طريق animate() لإنشاء شريط التقدم
كيفية استخدام animate() طريقة إنشاء شريط التقدم.
إضافة التمرير السلس إلى المراسي الصفحة
كيفية استخدام animate() لإضافة التمرير السلس إلى الروابط.