Efeito rollover com jQuery

Olá amigos, neste artigo apresentarei um interessante efeito rollover de forma prática e simples utilizando o jQuery.
Vamos aos códigos utilizados no artigo:
CSS

#icone{ height:25px; position:absolute; top:45%; left:45%;}
#icone li { float:left; position:relative; margin-right:20px;}
#icone span {background: url(ttbg.jpg) no-repeat;
	width: 110px;
	height: 35px;
	position: absolute;
	top: -50px;
	left: -80px;
	text-align: center;
	padding: 5px;
	display: none;
	line-height:110%;
	color:#000000;
	cursor:pointer;
}

jQuery

jQuery(document).ready(function(){
$("#iconbar li").hover(
	function(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("x.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").attr({
			"style": 'display:inline'
		});
		$(this).find("span").animate({opacity: 1, top: "-60"},   {queue:false, duration:400});
		},
	function(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "x.gif"});
		$(this).find("span").animate({opacity: 0, top: "-50"},   {queue:false, duration:400}, "linear",
	function(){
	  $(this).find("span").attr({"style": display:none'});
	});
	});
});

xHTML

<ul id="icone">
	<li><a href="#">
		<img src="keyx.gif" alt="" />
		Altere sua senha
	</a></li>
	<li><a href="#">
		<img src="rssx.gif" alt="" />
		Assine nosso RSS!
	</a></li>
	<li><a href="#">
		<img src="selx.gif" alt="" />
		Altere as configurações!
	</a></li>
</ul>

Posts Relacionados

• Exibir e Ocultar uma div com jQuery (11)
• Utilizando o plugin SimpleModal Contact Form (SMCF) (4)