تأثيرات جي كي إي

  • الصفحة السابقة
  • الصفحة التالية

جي كي إي يمكن أن يخلق تأثيرات مثل إخفاء، عرض، التبديل، السحب وتأثيرات الرسوم المتحركة المخصصة.

جربها بنفسك

جرب هذا التأثير jQuery:}

CodeW3C.com - الموقع الرائد لتعليمات تقنيات الويب

في CodeW3C.com، يمكنك العثور على جميع الدروس التي تحتاجها لبناء موقع الويب.

انقر هنا

مثال

jQuery hide()
تقديم عرض بسيط لوظيفة jQuery hide().
jQuery hide()
عرض بسيط آخر لـ hide(). كيفية إخفاء جزء من النص.
jQuery slideToggle()
تقديم عرض بسيط لوظيفة slide panel.
jQuery fadeTo()
تقديم عرض بسيط لوظيفة jQuery fadeTo().
jQuery animate()
تقديم عرض بسيط لوظيفة jQuery animate().

إخفاء وعرض jQuery

يدعم jQuery إخفاء وعرض العناصر من خلال وظائف hide() و show():

مثال

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

جربها بنفسك

يمكن تعيين speed و callback كمتغيرين اختياريين لكلا وظائف hide و show.

النحو:

$(selector).hide(سرعة,استدعاء)
$(selector).show(سرعة,استدعاء)

سرعة المستعارياة تحدد السرعة لعرض أو إخفاء العناصر. يمكنك تعيين هذه القيم: "slow", "fast", "normal" أو بالألفية الثانية.

callback المست参ياة هي اسم الدالة التي تُنفيذ بعد إكمال وظائف hide أو show. ستعلم المزيد عن ذلك في الفصول التالية من هذا الدليل callback معرفة المعلمات

مثال

$("button").click(function(){
$("p").hide(1000);
});

جربها بنفسك

تحويل jQuery

استخدمت وظيفة jQuery toggle() وظائف show() أو hide() لتحويل حالة الظهور للعناصر HTML.

إخفاء العناصر المعرضة، عرض العناصر المخفية.

النحو:

$(selector).toggle(سرعة,استدعاء)

سرعة يمكن تعيين هذه القيم: "بطيء", "سريع", "معتدل" أو في الميلي ثانية.

مثال

$("button").click(function(){
$("p").toggle();
});

جربها بنفسك

callback المعلمات هي اسم الدالة التي يتم تنفيذها بعد اكتمال الدالة الحالية. ستعلم المزيد عنها في الفصول التالية من هذا الدليل callback معرفة المعلمات

وظائف سحب jQuery - slideDown, slideUp, slideToggle

jQuery يمتلك وظائف سحب كالتالي:

$(selector).slideDown(سرعة,استدعاء)
$(selector).slideUp(سرعة,استدعاء)
$(selector).slideToggle(speed,callback)

سرعة يمكن تعيين هذه القيم: "بطيء", "سريع", "معتدل" أو في الميلي ثانية.

callback المعلمات هي اسم الدالة التي يتم تنفيذها بعد اكتمال الدالة الحالية. ستعلم المزيد عنها في الفصول التالية من هذا الدليل callback معرفة المعلمات

مثال على slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

جربها بنفسك

مثال على slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
});

جربها بنفسك

مثال على slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

جربها بنفسك

دوال fade jQuery - fadeIn(), fadeOut(), fadeTo()

jQuery تتضمن هذه الدوال fade:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

سرعة يمكن تعيين هذه القيم: "بطيء", "سريع", "معتدل" أو في الميلي ثانية.

في دالة fadeTo() شفافية المعلمات تُحدد إلى درجة الشفافية المحددة.

callback المعلمات هي اسم الدالة التي يتم تنفيذها بعد اكتمال الدالة الحالية. ستعلم المزيد عنها في الفصول التالية من هذا الدليل callback معرفة المعلمات

مثال على fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

جربها بنفسك

مثال على fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

جربها بنفسك

تحريك مخصص jQuery

قواعد النحو لإنشاء تحريك مخصص باستخدام jQuery:

$(selector).animate({params},[duration],[easing],[callback])

المعدل الرئيسي هو المتغيراتهذا التعريف يشير إلى خصائص CSS التي يتم تطبيقها في التحريك. يمكن تعيين عدة خصائص من هذا النوع في نفس الوقت:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

المعدل الثاني هو مدةهذا التعريف يشير إلى الوقت المطبق على التحريك. القيم المحددة هي: "بطيء", "سريع", "معتدل" أو في الميلي ثانية.

مثال 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

جربها بنفسك

مثال 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

جربها بنفسك

العناصر HTML هي بالافتراض موقعة بشكل ثابت، ولا يمكن تحريكها.

لجعل العنصر قابل للحركة، قم بتعيين CSS position إلى relative أو absolute.

jQuery إثراء - من هذه الصفحة

الوظيفة الوصف
$(selector).hide() إخفاء العنصر المحدد
$(selector).show() إظهار العنصر المحدد
$(selector).toggle() تبديل العنصر المحدد بين المخفية والإظهار
$(selector).slideDown() تمرير العنصر المحدد إلى الأسفل (إظهار)
$(selector).slideUp() تمرير العنصر المحدد إلى الأعلى (إخفاء)
$(selector).slideToggle() تبديل العنصر المحدد بين التمرير إلى الأعلى والتمرير إلى الأسفل
$(selector).fadeIn() تقديم العنصر المحدد
$(selector).fadeOut() تقليل شفافية العنصر المحدد
$(selector).fadeTo() تقليل شفافية العنصر المحدد إلى شفافية معطاة
$(selector).animate() تنفيذ تأثيرات مخصصة على العنصر المحدد

للحصول على دليل مرجعي كامل، يرجى زيارة دليل jQuery Effect。

  • الصفحة السابقة
  • الصفحة التالية