[jQuery] Dynamiczna zmiana kolorów danego linka

Ostatnio zastanawiałem się jak można w efektowny sposób pokazać najazd myszką na dany link?
Wpadłem na coś takiego, by użyć biblioteki jQuery, aby osiągnąć zamierzony efekt.
Aby przygotować taki efekt, musimy mieć:

Do tego przykładu użyłem następującego kodu HTML, ukazującego strukturę menu:

<div id="box">
	<p>Pierwszy typ animacji</p>
	<div id="menu" class="klasa1">
        <ul>
            <li> <a href="#"> Pierwszy</a></li>
            <li> <a href="#"> Drugi</a></li>
            <li> <a href="#"> Trzeci</a></li>
            <li> <a href="#"> Czwarty</a></li>
    	</ul>
    </div>
    <p>Drugi typ animacji</p>
    <div id="menu" class="klasa2">
        <ul>
            <li> <a href="#"> Pierwszy</a></li>
            <li> <a href="#"> Drugi</a></li>
            <li> <a href="#"> Trzeci</a></li>
            <li> <a href="#"> Czwarty</a></li>
    	</ul>
    </div>
    <p>Trzeci typ animacji</p>
    <div id="menu" class="klasa3">
        <ul>
            <li> <a href="#"> Pierwszy</a></li>
            <li> <a href="#"> Drugi</a></li>
            <li> <a href="#"> Trzeci</a></li>
            <li> <a href="#"> Czwarty</a></li>
    	</ul>
    </div>
    <p>Czwarty typ animacji</p>
    <div id="menu" class="klasa4">
        <ul>
            <li> <a href="#"> Pierwszy</a></li>
            <li> <a href="#"> Drugi</a></li>
            <li> <a href="#"> Trzeci</a></li>
            <li> <a href="#"> Czwarty</a></li>
    	</ul>
    </div>
    </div>

Następnie stworzyłem kod w JavaScripcie odpowiadający za zmianę koloru w linkach w każdej z klas menu:

// Animacja koloru tła
$(document).ready(function(){
$(".klasa1 a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
// Zmiana koloru czcionki
$(".klasa2 a").hover(function() {
$(this).animate({ color: "#00eeff" }, 400);
},function() {
$(this).animate({ color: "#FFFFFF" }, 500);
});
// Zmienny kolor czcionki po najechaniu.
original = $('.third a').css('background-color');
$('.klasa3 a').hover(function() { //mouseover
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({'backgroundColor': col}, 1000);
},function() { //mouseout
$(this).animate({'backgroundColor': original},500);
});
// Kolor czcionki po najechaniu nie zmienia się po cofnięciu kursora myszki
$('.klasa4 a').hover(function() { //
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({'backgroundColor': col},500);
},function() { //mouseout
$(this).animate({'backgroundColor': col},500);
});
});

Jak widać dodałem odpowiednie komentarze w kodzie, by było wiadomo za co, która część kodu odpowiada.
Dzięki temu uzyskam pożądane efekty dla każdej z klas menu 🙂
Na koniec dorzucam przykładowy plik ze stylem dla tego przykładu:

body{
     margin:  0;
	 font-family:  Tahoma, sans-serif
}
a {
    color: #cc2200; 
}
p {
	color: #FFFFFF;
}
#box {
     margin: 20px auto;
     width: 800px;
     background: #2b2b2b;
     padding: 10px;
}
#box h1{
     padding: 2px 0px;
     font-size: 28px;
     color: #fff;
     margin-left: 140px;
}
#box h2{
     padding: 2px 0px;
     font-size:  25px;
     color: #fff;
     margin-left: 100px;
}
#menu{
     margin: 0 auto;
     width: 600px;
     height: 40px;
}
 
#menu ul {
     margin: 0;
     list-style-type: none;
}
 
#menu ul li{
     float: left;
     padding-left: 10px;
}
.klasa1 a{
     font-size: 24px;
     text-transform: normal;
     letter-spacing: -0.1;
     color: #eeeeee;
     text-decoration: none;
     background: #303030;
     padding: 5px;
}
 
.klasa2 a {
     font-size: 20px;
     font-style: italic !important;
     color: #fff;
     text-decoration: none;
     background: #303030;
     padding: 5px;
}
 
.klasa3 a {
      font-size: 20px;
      font-style: italic !important;
      color: #fff;
      text-decoration: none;
      background: #cc0022;
      padding: 5px;
}
 
.klasa4 a {
      font-size: 20px;
      font-style: italic !important;
      color: #fff;
      text-decoration: none;
      background-color: #cc0022;
      padding: 5px;
}

Dzięki temu uzyskałem pożądany efekt zmiany kolorów zarówno tła w przyciskach jak i zmianę koloru czcionek w linkach.
Tutaj można obejrzeć demo z tego przykładu.
Mam nadzieję, że ten wpis okaże się Wam przydatny podczas budowania ciekawych stron WWW 🙂