ط´ط±ط* ط¨ط¹ط¶ ط§ظ„ط®ظˆط¢طµ ظپظٹ jQuery ! [ طھط¬ظ‡ظٹط² ط§ظ„طµظپط*ط© طŒ Hide طŒ Show طŒ Fade ]


بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته اليوم جايب لكم درس مفصل لـشرح طريقة بعض الخوآً في جيكويري ! ..

نبدا على بركة الله ! ..

الخاصية الاولى تجهيز الصفحة ..

لكي يتم يتجهيز الصفحة لكي تعمل الاكود code راح تجي بين
ال <head>

ورآح تككتب !

رمز Code:
<script src=&quot;http://code.jquery.com/jquery-migrate-1.2.1.min.js&quot;></script> <script> $(document).ready(function(){ // هنا تكتب الاكوآد .. ! }); </script>
</head>

الخوآص !
Fade واخواتها ! ..
fadeIn( اظهار الشي بطريقة التلاشي ..)
فبل البدء فش الشرح طريقة . افتح البرنامج الى تستعملها واكتب ..

رمز Code:
<!DOCTYPE html> <html> <head> <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;> </script> <script> $(document).ready(function(){ // هنا اكوآد .. jQuery }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button> <br><br> <div id=&quot;div1&quot; style=&quot;width:80px;height:80px;display:none;ba ckground-color:red;&quot;></div><br> <div id=&quot;div2&quot; style=&quot;width:80px;height:80px;display:none;ba ckground-color:green;&quot;></div><br> <div id=&quot;div3&quot; style=&quot;width:80px;height:80px;display:none;ba ckground-color:blue;&quot;></div> </body> </html>
الان لو تلاحظ في الكود code استعملت الخاصية .. display:none;
وقد استعملتها لكي اخفي المربع .. لكي يعمل الكود code ..

وساشرح طريقة الكود code المشابهة له وهو Show وهو لاظهار الشيء ولكن بدون اي حركات ..

الان في منطقة ال

$(document).ready(function(){
// هنا اكوآد .. jQuery
});
</script>

نكتب
رمز Code:
$(&quot;button&quot.click(function(){ $(&quot;#div1&quot.fadeIn(); $(&quot;#div2&quot.fadeIn(&quot;slow&quot; $(&quot;#div3&quot.fadeIn(3000); });
اي عندما يظهر الضغط على الزر اضغط ال div 1 و div 2 و div3 ! ..
وهناك طريقتين لتحيد الوقت fade يمكن استعمال ارقامم او &quot;slow &quot; &quot;fast&quot; !!

show .. نفس خاصية fadi ! .. بس الشو اظهار مباشرة ! .. جرب شوفو الفرق ضيف في الكود code !
رمز Code:
$(&quot;button&quot.click(function(){ $(&quot;#div1&quot.show(); $(&quot;#div2&quot.show(&quot;slow&quot; $(&quot;#div3&quot.show(3000); });
الان لو تلاحظ في الكود code استعملت الخاصية .. display:none;
لكي نخفي العنر الذي نريده ! ..

نجي لعكس الخاصيتين ! ..



hide (اخفاء العنصر ! )
fadeOut (الاخفاء بطريقة التلاشي : كما اسميه ! )

مثال للتفهيم ..
رمز Code:
$(&quot;button&quot.click(function(){ $(&quot;#div1&quot.hide(); $(&quot;#div2&quot.hide(&quot;slow&quot; $(&quot;#div3&quot.hide(3000); });
رمز Code:
$(&quot;button&quot.click(function(){ $(&quot;#div1&quot.fadeOut(); $(&quot;#div2&quot.fadeOut(&quot;slow&quot; $(&quot;#div3&quot.fadeOut(3000); });
اذا الخوآص : fadeIn / show ! للاظهآر .
اذا الخوآص : hide / fadeOut للاخفاء .

يمكن استعمال الارقام مثل
رمز Code:
(#div2&quot.fadeOut(2000)
او استخدا الخواص slow و Fast !
رمز Code:
(#div2&quot.fadeOut(&quot;slow&quot
قبل ان اختم احب ان اضع امثلة لجميع الخوآص ..
jQuery fadeIn(Tryit Editor v1.8)
fadeOut(Tryit Editor v1.8)
/
hide() and show()
Tryit Editor v1.8
المصدر مدونتي وديزاد باتنة :
شرح طريقة بعض الخوآص في jQuery ! [ تجهيز الصفحة ، Hide ، Show ، Fadi ] - دكتور ويب




التعديل الأخير كان بواسطة Just Designer; 04 - 08 - 2014 الساعة 05:11




©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©