أحدث البرامج التعليمية وتطوير الشبكة
 

jQuery آثار - الرسوم المتحركة

❮ السابق التالي الفصل ❯

ومسج animate() طريقة يتيح لك إنشاء الرسوم المتحركة المخصصة.



مسج

مسج الرسوم المتحركة - و animate() الطريقة

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

بناء الجملة:

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

تحدد المعلمة بارامس المطلوبة خصائص CSS لتكون متحركة.

تحدد سرعة مقياس اختياري لمدة تأثير. يمكن أن يستغرق القيم التالية: "slow", "fast" ، أو ميلي ثانية.

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

يوضح المثال التالي استخدام بسيطة من animate() طريقة. وهو يتحرك على <div> العنصر إلى اليمين، حتى أنها وصلت خاصية اليسرى من 250px:

مثال

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 
انها محاولة لنفسك »

افتراضيا، كل عناصر HTML لديها موقف ثابت، ولا يمكن نقلها.
لمعالجة الموقف، وتذكر لأول مرة تعيين الخاصية الموقف المغلق من عنصر ل relative, fixed ، أو absolute !

مسج animate() - تعامل مع خصائص متعددة

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

مثال

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 
انها محاولة لنفسك »

هل من الممكن التلاعب جميع خصائص CSS مع animate() طريقة؟

نعم تقريبا! ومع ذلك، هناك شيء واحد المهم أن نتذكر: جميع الأسماء الملكية يجب أن تكون الإبل فتش عند استخدامها مع animate() الأسلوب: سوف تحتاج لكتابة paddingLeft بدلا من padding-left, marginRight بدلا من margin-right ، وهلم جرا.

أيضا، لا يتم تضمين لون الرسوم المتحركة في المكتبة مسج الأساسية.
إذا كنت ترغب في تحريك اللون، تحتاج إلى تحميل البرنامج المساعد اللون صور متحركة من jQuery.com.

مسج animate() - عن طريق القيم النسبية

فمن الممكن لتحديد القيم النسبية أيضا (القيمة ثم النسبية على القيمة الحالية للعنصر). ويتم ذلك عن طريق وضع += أو -= أمام القيمة:

مثال

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 
انها محاولة لنفسك »

مسج animate() - عن طريق القيم المحددة قبل

حتى يمكنك تحديد قيمة الرسوم المتحركة خاصية بأنها "show", "hide" ، أو "toggle" :

مثال

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 
انها محاولة لنفسك »

مسج animate() - يستخدم قائمة انتظار الوظيفة

افتراضيا، مسج يأتي مع وظيفة الانتظار لالمتحركة.

هذا يعني أنه إذا كنت أكتب متعددة animate() يدعو بعد بعضها البعض، مسج يخلق قائمة انتظار "الداخلية" مع هذه الدعوات الأسلوب. ثم تشغيله على الأرواح ويدعو واحدا تلو الآخر.

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

مثال 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");
}); 
انها محاولة لنفسك »

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

مثال 2

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
}); 
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»

مسج تأثيرات المرجعي

لمحة كاملة من جميع آثار مسج، يرجى زيارة موقعنا مسج تأثير المرجعي .


❮ السابق التالي الفصل ❯