How can I use jQuery to add a fade in hover effect to my nav items?
I'm brand new to jQuery (and JS in general) and I know it is possible to use it to add a fade in effect to my navigation rollovers.
Right now I'm using a master background sprite for the nav, and on :hover I'm just adding a background-position rule to shift the sprite down for each item to get my hover effect.
But I'd like to use jQuery to bring a smooth transition to the rollover effect. I googled it and found some similiar info, but mostly what I found dealt with instances where you have two images and fading one out to reveal the other. But I'm using CSS background-position to simply shift the image down. Can I do this more smoothe with jQuery, and how?
Here's the site: http://tuscaroratackle.com
1 ответ
1 пример из 100-Th
Добавить в
<li class="nav-link " id="rods">
<a href="/rods">
<span class="bg1">Rods</span>
<span class="bg2" style="display:none;">Rods</span>
</a>
</li>
jquery
$(document).ready(function(){
$("ul#nav li").each(function(){
$(this).mouseover(function(){
$(this).find("a span.bg1").fadeOut() ;
$(this).find("a span.bg2").fadein() ;
});
});
});
$(document).ready(function(){
$("ul#nav li").each(function(){
$(this).mouseover(function(){
$(this).find("a").addClass("bg1").fadeOut() ;
$(this).find("a").fadeIn();
});
});
});
и то же самое, когда мышь отключена, чтобы изменить задний фон, это не готовый к использованию код, он даже не тестировался, но это для идеи для вас
вместо fade вы можете использовать любой эффект!
P.S. : Но я думаю просто: эффект наведения более удобен для пользователя и неплохо выглядит :)