آموزش توابع slidup – addclass – removeclass در jquery

تبلیغات
کانال تلگرام فتولیا

با سلام به همه دوستان . امروز به ذکر یک مثال ساده به بررسی چند تابع ابتدایی jquery می پردازیم که امیدوارم مفید واقع شود .

ابتدا یک فایل html ساده با محتویات زیر بسازید :

حالا محتویات قسمت head را به شکل زیر ویرایش کنید :

در قسمت body هم سه پاراگراف به شکل زیر اضافه کنید :

با اجرای فایل در مرورگر چنین شکلی خواهید داشت :

با حرکت ماوس روی هر کدام از پاراگراف ها رنگ پس زمینه به زرد تبدیل می شود و نکته جالبتر با کلیک روی هرکدام از آنها می توان حذفش کرد.

بررسی کدها :

بخش آبی : کدهای جی کوئری در این بخش قرار می گیرند . البته می توانید این بخش را حذف کنید ولی بعد از اینکار باید کدهای جی کوئری را بعد از پاراگراف ها قرار دهید تا اجرا شود.

بخش قرمز : این بخش از جی کوئری به صفحه فرمان می دهد تا بعد از کلیک شدن روی پاراگراف (p) این بخش را بصورت پیمایش بسوی بالا پنهان کند که اینکار بوسیله تابع slideup انجام می شود.

بخش سبز : این کد جی کوئری در واقع وقتی ماوس روی یک پاراگراف پیمایش می کند (hover) یک کلاس به پاراگراف اضافه می کند( hilite اسم کلاسی است که قبلا در قسمت head نوشته ایم) و وقتی از روی آن عبور می کند کلاس را حذف می کند.

 

برای دانلود نمونه برنامه اینجا کلیک کنید.

در همین رابطه :   12 پلاگین jQuery برای تبدیل عکس به پس زمینه کامل

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in jQuery
پنج ساعت بسیار زیبای jQuery

امروز قصد داریم 5 ساعت آنالوگ و دیجیتال را خدمت شما معرفی کنیم تا در کارهای آینده خود از آنها...

Close