Latest web development tutorials

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

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



مسج

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

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

بناء الجملة:

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

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

تحدد سرعة مقياس اختياري لمدة تأثير. قد يستغرق القيم التالية: "بطيء"، "سريع"، أو ميلي ثانية.

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

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

أمثلة

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

محاولة »

مصباح افتراضيا، كل عناصر HTML لديها موقف ثابت ولا يمكن أن تتحرك.
لوضع التشغيل، تذكر أول عنصر CSS سمة الموقف المقرر أن النسبية، ثابتة أو مطلقة!

مسج الأرواح () - تعمل خصائص متعددة

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

أمثلة

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

محاولة »

مصباحيمكنك تحريك () طريقة لتشغيل جميع سمات CSS؟

نعم، تقريبا! ومع ذلك، فإن الشيء المهم أن نتذكر: عند استخدام الأرواح ()، والكتابة عن أسماء الصفات يجب استخدام تدوين الجمل، على سبيل المثال، يجب أن تستخدم بدلا من paddingLeft يسار الحشو، بدلا من استخدام marginRight هامش الحق، الخ .

وفي الوقت نفسه، لا يتم تضمين رسوم المتحركة اللون في المكتبة مسج الأساسية.

إذا كنت بحاجة إلى توليد لون الرسوم المتحركة، تحتاج إلى jquery.com تحميل اللون صور متحركة البرنامج المساعد.


مسج الأرواح () - استخدام القيمة النسبية

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

أمثلة

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

محاولة »

() الأرواح مسج - استخدام قيمة محددة مسبقا

يمكنك حتى وضع قيمة الممتلكات الرسوم المتحركة على "اظهار"، "الاختباء" أو "تبديل":

أمثلة

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

محاولة »

مسج الأرواح () - عن طريق وظيفة قائمة الانتظار

افتراضيا، يوفر مسج قدرات الطابور للرسوم المتحركة.

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

مثال 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> إلى اليمين 100 بكسل، ومن ثم زيادة حجم النص:

مثال 2

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

محاولة »