jQuery اثرات
jQuery کا استعمال سکتا ہے کہ ان اثرات کو پیدا کریں جو پنهان، نمائش، چرچا، لچکا اور اپنا تعمیماتی موشن کا عمل کر سکتا ہو.
خود کو چکار کریں
یہ 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 پنهان اور دکھانے
hide() اور show() دونوں کا استعمال، jQuery کا HTML عناصر کی پنهان کاری اور دکھانے کا مدد کرتا ہے:
مثال
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() اور show() دونوں کا دو چنوتی پارامتر speed اور callback کا تعین کرسکتے ہیں.
قانون:
$(selector).hide(speed,callback) $(selector).show(speed,callback)
سپیڈ پارامتر، دکھانے یا پنهان کرنے کی رفتار کو معین کرتی ہے. یہ مقدار تنظیم کی جاسکتی ہیں: "slow", "fast", "normal" یا میل سیکنڈ.
کالبیک پارامتر، hide یا show فنکشن تکمیل کئے جانے کے بعد چلنے والی فنکشن کا نام ہے. آپ اس درس کی نیچلی شعبوں میں مزید معلومات سیکھیں گے کالبیک پارامتروں کا علم
مثال
$("button").click(function(){
$("p").hide(1000);
});
jQuery چنڈو
jQuery فنکشن toggle() از فنکشن show() یا hide() برای تغییر حالت قابل مشاهده HTML عناصر استفاده میکند.
پائین آمدن عناصر نمایش داده شده و بالا آمدن عناصر پنهان شده.
قانون:
$(selector).toggle(speed,callback)
سپیڈ پارامتر یہی اعداد مقرر کئے جاسکتے ہیں: "slow", "fast", "normal" یا میل سیکنڈز۔
مثال
$("button").click(function(){
$("p").toggle();
});
کالبیک پارامتر یہ ہوتا ہے جو اس فونکشن کی تکمیل کے بعد چلایا جاتا ہے جس کا نام یہ ہوتا ہے۔آپ کو اس تربیت میں اس کے بارے میں مزید معلومات مل رہی ہیں، کالبیک پارامتروں کا علم
jQuery انیمیشن فنکشنز - slideDown, slideUp, slideToggle
jQuery کا انیمیشن فنکشنز:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
سپیڈ پارامتر یہی اعداد مقرر کئے جاسکتے ہیں: "slow", "fast", "normal" یا میل سیکنڈز۔
کالبیک پارامتر یہ ہوتا ہے جو اس فونکشن کی تکمیل کے بعد چلایا جاتا ہے جس کا نام یہ ہوتا ہے۔آپ کو اس تربیت میں اس کے بارے میں مزید معلومات مل رہی ہیں، کالبیک پارامتروں کا علم
slideDown() مثال
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() مثال
$(".flip").click(function(){
$(".panel").slideUp();
}
slideToggle() مثال
$(".flip").click(function(){
$(".panel").slideToggle();
});
جی کوئی فید نکالنے والی فونکشن - fadeIn(), fadeOut(), fadeTo()
جی کوئی پر فید نکالنے والی فونکشنوں کا حصول:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
سپیڈ پارامتر یہی اعداد مقرر کئے جاسکتے ہیں: "slow", "fast", "normal" یا میل سیکنڈز۔
fadeTo() فونکشن میں اپاچائی پارامتر اس کی ناپاکی کی دفعہ میں پائی جاتی ہے
کالبیک پارامتر یہ ہوتا ہے جو اس فونکشن کی تکمیل کے بعد چلایا جاتا ہے جس کا نام یہ ہوتا ہے۔آپ کو اس تربیت میں اس کے بارے میں مزید معلومات مل رہی ہیں، کالبیک پارامتروں کا علم
fadeTo() مثال
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
fadeOut() مثال
$("button").click(function(){
$("div").fadeOut(4000);
});
جی کوئی خود سے موشن
جی کوئئی فونکشن کا استعمال خود سے موشن بنانے کا بندوبست:
$(selector).animate({params},[duration],[easing],[callback])
کچھ اہم پارامترات یہ ہیں پارامزیہ موشن پیدا کرنے والی سی ایس ایس پرمتعلق کیا جاتا ہے۔کچھ اور ایسے پر متعدد متعلق کئے جاسکتے ہیں:
$("animate({width:\"70%\",opacity:0.4,marginLeft:\"0.6in\",fontSize:\"3em\"});
دوسرا پارامتر یہ ہوتا ہے دائورینسیہ تعریف کرتا ہے کہ آپ کو کس وقت پر ایک موشن ایپلی کریں گا۔اس کا مقررہ مقصد یہ ہوتا ہے: "slow", "fast", "normal" یا میل سیکنڈز۔
مثال 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 عنصر طبیعی طور پر سٹیٹک پوزیشن کا حامل ہوتا ہے اور موٹنہیں نہیں سکتا
اگر آپ کا عنصر موٹنے کا چاہتے ہیں تو پوزیشن کو رلیٹیو یا ایبزولوٹ کیا جائیگا
jQuery ایفیکٹ - اس پیج سے
| فونکشن | وصف |
|---|---|
| $(selector).hide() | منتخب شدہ عنصر کو پنهان کردیا جائیگا |
| $(selector).show() | منتخب شدہ عنصر کو دکھایا جائیگا |
| $(selector).toggle() | منتخب شدہ عنصر کو کلوز یا اوپن کردیا جائیگا |
| $(selector).slideDown() | منتخب شدہ عنصر کو کلوز کردیا جائیگا (دکھایا جائیگا) |
| $(selector).slideUp() | منتخب شدہ عنصر کو اوپن کردیا جائیگا (پنهان کردیا جائیگا) |
| $(selector).slideToggle() | منتخب شدہ عنصر پر اوپن اور کلوز کا چناؤ کردیا جائیگا |
| $(selector).fadeIn() | منتخب شدہ عنصر کو داخل کردیا جائیگا |
| $(selector).fadeOut() | منتخب شدہ عنصر کو مٹا دیا جائیگا |
| $(selector).fadeTo() | منتخب شدہ عنصر کو مقررہ ناپاکی میں مٹا دیا جائیگا |
| $(selector).animate() | منتخب شدہ عناصر پر خودکار موشن کا نفاذ |
کامپلٹ مرجع دستاویز کے لئے اپنے سائٹ پر جانا جائیں jQuery ایفیکٹ مرجع دستاویز。
