ایجاد تفاوت در بین div هایی که یک کلاس دارن

باعرض سلام و خسته نباشید به همه شما دوستان عزیز

من در سایتم از چند DIV با class یکسان استفاده می کنم و برای ایجاد زیبایی خاص از کد زیر استفاده می کنم:

کد:

---

$(‘div .item’).mouseover(
 function(){
 this.style.width = ’400px’;
 }
 ).mouseout(
 function(){
 this.style.width = ’123px’;
 }
 );

---

ولی من می خوام یک کاره دیگر هم انجام بدهم اما نمی دانم چطوری؟؟؟

من می خوام بعد از اینکه اندازه DIV ای که mouse روی آن قرار داره بزرگ شد، اندازه بقیه DIV ها کوچک شود.

من سایت JQuery را هم دیدم ولی به نتیجه نرسیدم.

اینم اضافه کنم که من زیاد با JQuery آشنایی ندارم.

باتشکر

نکته اول اینکه بهتره بجای دو تا event handler از hover استفاده کنین که دو تا تابع از شما میگیره اولی برای زمانیکه موس میاد روی المنت و دومی برای زمانی که از روی المنت میره کنار. درواقع نسخه جمع و جورتره mouseenter و mouseleave هستش. پس توی مرحله اول کد شما میشه این شکلی:

کد:

---

$('div .item').hover(
        function(){
                this.style.width = '400px';
        },
        function(){
                this.style.width = '123px';
        }
);

---

مرحله دوم: بهتره و ساده تره که بجای استفاده از this و مقادیر خود جاوااسکریپت از خود jQuery استفاده کنید و بجای this.style.width از $(this).width() استفاده کنین. پس کدتون میشه:

کد:

---

$('div .item').hover(
        function(){
                $(this).width(400);
        },
        function(){
                $(this).width(123);
        }
);

---

مرحله سوم: این کد فقط کار بزرگ و کوچیک کردن یه المنت رو انجام میده. حالا شما میخواین سایز بقیه المنت ها مثلا 5 پیکسل کوچیکتر بشه. کدتون میشه:

کد:

---

$('div .item').hover(
        function(){
                $('div .item').width(118);
                $(this).width(400);
        },
        function(){
                $('div .item').width(123);
        }
);

---

این ساده ترین حالت انجام دادن این کاره و شما میتونین از متدهایی مثل filter و not برای فیلتر کردن المنتها استفاده کنین. همینطور میتونین از مثلا animate برای افکت دادن به کارتون استفاده کنین تا مثل الآن یهو بزرگ و کوچیک نشن مثلا:

کد:

---

$('div .item').hover(
        function(){
                $('div .item').stop().animate({width: 118});
                $(this).stop().animate({width: 400});
        },
        function(){
                $('div .item').stop().animate({width: 123});
        }
);

---