منبع Wanalyst.net

اعمال امروز : : 1 . انواع محو کردن جعبه


2 . انواع آشکار کردن جعبه 3 . عوض کردن رنگ با کد جی کوئری


انواع محو کردن جعبه : # Display: none : ساده ترین روش که البته به جی کوئری ربطی ندارد این است که شما در CSS جعبه ، از کد Display: none; استفاده کنید ! با این کد بعد از ریفرش کردن صفحه دیگر جعبه را نمیبینید ولی امروز یاد می گیریم که چگونه خودمان با کلیک کردن باعث محو شدن و حرکت کشویی یا … شویم. ابتدا کد آموزش روز اول که دانلود کردید باز کنید و Click Here To Fade Out رو به Click Me تغییر بدید چون امروز قرار نیست فقط محو کنیم ! # slideUp : فکر می کنم بهترین معنی برای این کلمه ” کشویی ” بسته شدن باشه چون در موتور های جستجو گر این واژه زیاد بین کاربرهای فارسی استفاده می شود ما هم زین پس از این واژه استفاده خواهیم کرد. خب برای بسته شدن کشویی کافیست در کد روز اول به جای FadeOut از slideUp استفاده کنیم . خواهید دید که هنگام کلیک روی Click Me ، جعبه به صورت کشویی بسته می شود و در انتها نتیجه ای مانند Display: none به شما می دهد. شما در هر افکت می توانید زمان را کم و زیاد کنید. مانند : (۴۰۰۰) یا (‘slow’) # hide : این افکت هنگام فعال شدن باعث می شود جعبه ی ما از عرض و ارتفاع کوچک شده و در ضمن محو هم می شود. کافیست به جای slideUp از hide استفاده کنید. ببینید با چهار حرف چقدر افکت انجام می شود ! این همان سادگی جی کوئریست. فکر کنید به جای Click Me یک دکمه گذاشته اید و لینکدونی سایتتان با زدن دکمه محو خواهد شد. انواع آشکار کردن جعبه : برای آشکار کردن جعبه طبیعیست که اول جعبه ای نباشد سپس آن را آشکار کنیم ! خب برای این کار باید در کد CSS جعبه Display: none; را قرار دهیم تا جعبه در ابتدا نشان داده نشود تا بتوانیم آن را با افکت های جی کوئری آشکار کنیم. # show : کافیست جای hide بنویسید show . میبینید که جعبه دقیقاً بر خلاف hide عمل کرده و از عرض و ارتفاع بزرگ شده و آشکار می شود. # slideDown : حتماً خودتان می دانید که جای نوشتن این افکت کجاست. این افکت دقیقاً بر عکس slideUp عمل می کند و جعبه را به صورت کشویی از بالا آشکار می کند. در روز های بعد به شما خواهم گفت که چگونه جعبه را از هر طرفی که دوست دارید محو یا آشکار کنید. فکر کنید یک طناب بالای سایتتان آویزان است و با کلیک روی طناب از بالای سایتتان فید یا هر چه دوست دارید به پایین کشیده می شود. عوض کردن رنگ با کد جی کوئری : خب برای آموزش این کد می توانیم رنگ جعبه را عوض کنیم ولی فکر می کنم بهتر باشه که متنی بنویسم با رنگ قرمز و بعد از کلیک روی Click Me همزمان با آشکار شدن جعبه ، رنگ نوشته هم عوض شود ! به این ترتیب میبینید جی کوئری چگونه می تواند همزمان چندین افکت را با هم اجرا کند. ابتدا در قسمت body تگ پاراگراف را باز کنید و درون تگ هر چه دوست دارید بنوسید : </p> کسی که مثل کبک سرشو زیر برف می کنه در واقع لگد دیگرانو به جون می خره <p> سپس در قسمت CSS رنگ قرمز را برای تگ پاراگراف انتخاب کنید : Code :

P { color:#900 }

Code :

<script type="text/javascript"> $(function() { $('a').click(function() { $('#box').fadeOut(5000); $('p').css('color' , 'blue'); }); }); </script> : $(’p').css(’color’ , ‘blue’); توضیحات کد

و در قسمت جی کوئری );’p').css(’color’ , ‘blue’)$ را اضافه کنید که به صورت زیر خواهد شد : # طبق معمول کد با $ شروع می شود. # p گزاره ای است که قرار است افکت روی آن انجام شود. # .css هنگامی استفاده می شود که بخواهیم با کمک جی کوئری تغییراتی در css بدهیم # بعد از .css همیشه دو گذاره داریم. اولی تابع تعریف است مثل color یا background-color یا تمام گذاره هایی که در css استفاده می کنیم. و گذارۀ دوم مقدار تابع است./>