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




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




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


باستخدام 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()تشغيل حركة معينة للعناصر المحددة





ليست هناك تعليقات:

إرسال تعليق