تحقيق تأثيرات الرسوم المتحركة للصفحة باستخدام JQuery (مثال على الكود)

هناك العديد من الوظائف يمكن استخدامها لتحقيق تأثير التحريك، حيث أن وظيفة animate هي واحدة من أكثر الوظائف شيوعًا. يلي شرح مختصر حول كيفية استخدام هذه الوظيفة.

شكل أساسي للوظيفة animate

شكل أساسي لتحقيق تأثير التحريك عبر animate:

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

في{params}هي ضرورية، وهي موضوع، يشير إلى أننا نريد أن تكون لدينا عنصر معين يمر عبر تأثير التحريك، لديه أنماط CSS، وspeed وcallback هي خيارات اختيارية، حيث يشير speed إلى سرعة التحريك، يمكن أن يكون نوعًا من القيم العددية (مثل 1000 يعني أن التحريك يتحول إلى النمط المحدد في params في غضون 1 ثانية) أو بسيط أو سريع. يشير callback إلى الدالة التي يجب تنفيذها بعد انتهاء التحريك.

مثال على الكود:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
  });
 });
});
</script> 
</head>
<body>
<button>بدء التحريك</button>
<p>بالتجريد، جميع عناصر HTML لها موضع ثابت ولا يمكن تحريكها. لتعديل الموضع، تذكر أولاً تعيين خاصية الموضع الخاصة بالعنصر إلى نسبي، ثابت، أو مطلق!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

أشكال تعيين متغيرات objekt {params} المختلفة

يمكننا تعيين المتغيرات في objekt {params} بالشكل التالي.

نوع القيمة المطلقة

مثال الكود المقدم في النص هو من خلال القيمة النسبية لتعيين objekt params.

نوع القيمة النسبية

على سبيل المثال، يمكننا إضافة ' '+' '-' وغيرها إلى قيم المتغيرات.

مثال على الكود:

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

show،hide،و toggle

قيم المتغيرات في objekt params، يمكننا أيضًا تعيينها مثل القيم الثلاثة المذكورة أعلاه، مثل الكود التالي، والذي يعمل على إزالة محتوى علامة div.

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

هذا المقال الذي تم تنفيذ تأثيرات التحرك للصفحة من خلال jQuery هو كل المحتوى الذي أشاركه معكم، آمل أن يكون هذا مرجعًا لكم، وأتمنى أن تشجعوا دائمًا تعليمات النفخ.

دليل الأساسيات

أنت قد تحب