[jQuery] Dynamiczna zmiana kolorów danego linka
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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>// 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);
});
});
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;
}
Tutaj można obejrzeć demo z tego przykładu.
Mam nadzieję, że ten wpis okaże się Wam przydatny podczas budowania ciekawych stron WWW 🙂
About the author
