الـتــأثيرات

يمكن استخدام تأثيرات الإخفاء و الإظهار و التأثيرات الجانبية و التلاشي و التأثيرات المتحركة وغيرهم .

---

استخدام الاظهار و الاخفاء

باستخدام jQuery يمكنك اظهار و اخفاء عناصر HTML من خلال الطرائق hide() و show().

مثال

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

يمكن أن تأخذ كلاً من hide() و show() القيم الاختيارية مثل السرعة و الاستدعاء .

التركيبة

$(selector).hide(speed,callback)
$(selector).show(speed,callback)
 

تحدد قيمة السرعة speed سرعة الاظهار أو الاخفاء و التي يمكن أن تأخذ القيم التالية :
"slow" و "fast" و "normal" أو milliseconds :

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

ان قيمة الاستدعاء callback هي اسم function الذي سيظهر بعد اكتمال الكود الوظيفي اظهار او اخفاء . ستتعلم المزيد عن callback في الدرس القادم من هذا الدورة .

---

التغيير

ان طريقة toggle() المستخدمة في jQuery تتحكم في تغيير الوضوح لعناصر HTML باستخدام الطرائق show() أو hide() .

أي يتم إظهار العناصر المخفية و يتم اخفاء العناصر الظاهرة .

التركيبة :

$(selector).toggle(speed,callback)
 

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

مثال

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

أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .

---

slideDown, slideUp, slideToggle

تقوم طريقة slide بتغيير الارتفاع بشكل متدرج للعناصر المختارة .

ان طريقة slide تحتوي على الطرائق التالية :

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
 

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .

مثال slideDown()

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

مثال slideUp()

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

مثال slideToggle()

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

---

fadeIn, fadeOut, fadeTo

تقوم طريقة fade بتغيير التعبئة بشكل متدرج للعناصر المختارة .

ان طريقة fade تحتوي على الطرائق التالية :

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

ان قيمة speed يمكن أ تكون أحد هذه القيم التالية مثل slow بطئ و fast سريع و normal طبيعي و milliseconds أي أجزاء الثانية .

ان القيمة المدخلة في الطريقة fadeTo() تسمح بتلاشي التعبئة المقدمة للعنصر .

أما القيمة الاستدعاء callback هو اسم function الذي سيظهر بعد اكتمال طرائق الاظهار و الاخفاء .

مثال fadeTo()

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

مثال fadeOut()

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

---

الرسوم المتحركة Animations

ان تركيبة jQuery في إنشاء أكواد رسوم متحركة هي :

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

القيمة المدخلة هي params والتي تشرح خاصيات CSS التي سيتم تحريكها . يمكن تحريك العديد من الخاصيات في نفس الوقت :

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

القيمة الثانية هي duration والتي تحدد سرعة الرسوم المتحركة . و القيم الممكنة هي "fast" و "slow" و "normal" و milliseconds .

المثال 1 :

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

المثال 2 :

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

</script>

ملاحظة :

ان عناصر HTML هي ثابتة ولايمكن تحريكها . ولجعل العناصر متحركة يمكن ضبط الخاصية في CSS الى ثابتة fixed أو relative أو مطلق absolute .

---

تأثيرات jQuery

هذه بعض الأمثلة التي تأثر على وظائف jQuery

الوظيفة	الشرح
$(selector).hide()	اخفاء العنصر المحدد
$(selector).show()	اظهار العنصر المحدد
$(selector).toggle()	التغيير بين الاظهار و الاخفاء للعنصر المحدد
$(selector).slideDown()	إظهار الشرائح للعناصر المحددة
$(selector).slideUp()	إخفاء الشرائح للعناصر المحددة
$(selector).slideToggle()	التغيير بين إظهار و إخفاء الشرائح للعناصر المحددة
$(selector).fadeIn()	تلاشي العناصر المحددة
$(selector).fadeOut()	إظهار العناصر المحددة
$(selector).fadeTo()	إظهار العناصر المحددة من خلال خاصية اللاشفافية
$(selector).animate()	تشغيل حركة معينة للعناصر المحددة

---