فٍید شدن رنگ بکگراند هنگام هاور شدن

سلام دوستان؛ دیدید بعضی جاها وقتی میرید روی لینک رنگ پس زمینه بجای تغییر لحظه ای بطور آرام تغییر می کنه و به نوعی fade میشه؟
چطور میشه چنین کاری کرد؟

اینها بیشتر مربوط میشه به جاوا اسکریپت و این بخش:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
ولی با جی کوئری اگر بخواید درستش کنید:
اول به body این استایل رو میدید:

کد:

---

            body {
                background: #999;
            }

---

که واضحه جای 999 رنگ رو انتخاب می کنید.
بعد هم این کد جی کوئری:

کد:

---

            $(document).ready(function() {
                $('body').hide();
                $('body').fadeIn("slow");
            });

---

یعنی در حقیقت رنگ عوض نمیشه؟

با این کد بله.

البته یه روش دیگه هم هست که میتونین برای رنگ پس زمینه المنت بجای رنگ Hex یا RGB معمولی از RGBA استفاده کنین که یه پارامتر شفافیت هم داره و میتونین بهش بگین که شفافیت رنگ پس زمینه چقدر باشه. حالا برای محو کردن تدریجی رنگ پس زمینه میتونین این مقدار شفافیت رو که بین 0 و 1 هستش رو به تدریج کم کنین تا از 1 برسه به صفر. با این روش دیگه خود المنت از صفحه حذف نمیشه و فقط رنگ پس زمینه ش محو میشه. اینم به نمونه کد برای مثال:

کد:

---

var rgb_color = '22,33,247';
var trans = 1;
var element = this;
timeout = setInterval(function(){
        if(trans >= 0){
                trans -= 0.01;
                element.style.backgroundColor = 'rgba(' + rgb_color + ',' + trans + ')';
        }
        else{
                clearInterval(timeout);
        }
},40);

---

توضیحش هم میشه رنگ بکگراند المنت که rgb(22,43,247) هست که میشه یه رنگ آبی مثلا در ابتدای اجرای کد دارای شفافیت 1 یعنی کاملا واضحه و با هر بار اجرا شدن این کد مقدارش یک صدم کمتر از مقدار قبلیش میشه. یعنی با هر بار اجرا شدن این کد یک صدم رنگ پس زمینه شفاف تر میشه تا زمانی که به صفر میرسه و کد دیگه اجرا نمیشه. در کل این تابع 100 بار اجرا میشه با فاصله 40 میلی ثانیه و اجرای کلش هم 4 ثانیه طول میکشه. یعنی در عرض 4 ثانیه رنگ پس زمینه المنت شما کاملا محو میشه. این یه مثال کلی بود و برای قابل استفاده شدن باید روش کار بشه.

خب css3 چه مردی داره ؟
چرا جاوا اسکریپت و جی کوئری ؟

کد:

---

content #nav a {
    background-color: #FF0;
}

content #nav a:hover {
      background-color:#AD310B;
          -webkit-transition: background -color 0.5s linear;
    -moz-transition: background -color 0.5s linear;
    -o-transition: background -color 0.5s linear;
    transition: background -color 0.5s linear;;
}

---

این هم یک نمونه دیگه [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی

CSS3 هیچ موردی نداره و اتفاقا من خودم طرفدار سرسخت استفاده از CSS3 بجای جاواسکریپت هستم ولی اگه به کدی که گذاشتین بعنوان مثال نگاه کنیم اکثرشون فقط توسط مرورگرهای Webkit مثل Chrome و یه تعدادی کمیشون هم Safari ساپورت میشن و حتی فایرفاکس هم ساپورتشون نمیکنه و این مسلما چیزی نیست که مطلوب باشه.

نقل قول:

---

نوشته شده توسط Web Design [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

خب css3 چه مردی داره ؟
چرا جاوا اسکریپت و جی کوئری ؟

کد:

---

content #nav a {
    background-color: #FF0;
}

content #nav a:hover {
      background-color:#AD310B;
          -webkit-transition: backgroun-color 0.5s linear;
    -moz-transition: backgroun-color 0.5s linear;
    -o-transition: backgroun-color 0.5s linear;
    transition: backgroun-color 0.5s linear;;
}

---

این هم یک نمونه دیگه [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی

---

همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
ورژن فایرفاکس 9.0.1

نقل قول:

---

نوشته شده توسط Web Design [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
ورژن فایرفاکس 9.0.1

---

کدتون یه ایرادی داشت که اجرا نمیشد! background رو اشتباها backgroun نوشته بودین.

بله درسته کار میکنن ولی منظور من این بود که خود transition که جزو CSS3 هست فعلا توسط هیچ مرورگری ساپورت نمیشه. و بقیه مرورگرها هم هر کدوم یه جایگزین رو ساپورت میکنن. فایرفاکس 3 و انواع ورژن های IE هم جزو مرورگرهایی هستن که این موضوع رو اصلا ساپورت نمیکنن. اطلاعات بیشترش رو هم اینجا ببینین:

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

شاید شما درست میگیذ وکم تجربگی منه
امید روزی که همه مرورگر ها با هم هماهنگ بشن و اینقدر مارو اذیتنکنند :46:
کد اصلاح شد