نکته اول اینکه بهتره بجای دو تا event handler از hover استفاده کنین که دو تا تابع از شما میگیره اولی برای زمانیکه موس میاد روی المنت و دومی برای زمانی که از روی المنت میره کنار. درواقع نسخه جمع و جورتره mouseenter و mouseleave هستش. پس توی مرحله اول کد شما میشه این شکلی:
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
مرحله دوم: بهتره و ساده تره که بجای استفاده از this و مقادیر خود جاوااسکریپت از خود jQuery استفاده کنید و بجای this.style.width از $(this).width() استفاده کنین. پس کدتون میشه:
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
مرحله سوم: این کد فقط کار بزرگ و کوچیک کردن یه المنت رو انجام میده. حالا شما میخواین سایز بقیه المنت ها مثلا 5 پیکسل کوچیکتر بشه. کدتون میشه:
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
این ساده ترین حالت انجام دادن این کاره و شما میتونین از متدهایی مثل filter و not برای فیلتر کردن المنتها استفاده کنین. همینطور میتونین از مثلا animate برای افکت دادن به کارتون استفاده کنین تا مثل الآن یهو بزرگ و کوچیک نشن مثلا:
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید