Animasyonlu İpucu Metni -1

JQuery-tr Wiki sitesinden

Git ve: kullan, ara


Resim:taslak.gif Bu madde bir taslaktır. Bu maddeyi genişleterek katkıda bulunabilirsiniz.

Amaç: Linkere veya başka elemanlara ipucu metnini "attribute" değeleri ile vermek ve bu ipucuları animasyonla göstermek. Genel adı "tooltip" dir.

CSS 

.menu2 {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
}
.menu2 li {
	padding: 0; margin: 0 2px;
	float: left; position: relative;
	text-align: center;
}
.menu2 a {
	padding: 14px 10px; display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;	font-weight: bold;
}
.menu2 li em {
/* ipucu alanı için tasarım */
        background:#efefef;
	font-weight: normal;
	width: 180px;height: 45px;
	position: absolute;
	top: -85px; left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}


Javascript 

$(document).ready(function(){
 
	$(".menu2 a").append("<em></em>");
 
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
 
 
});


HTML 

<ul class="menu2">
	<li>
		<a href="http://wiki.jquery-tr.com" title="Jquery Wiki Sayfası">Wiki</a>		
	</li>
	<li>
		<a href="http://jquery-tr.com" title="Jquery Türkiye Sitesi">Jquery-tr</a>
	</li>
	<li>
		<a href="http://www.jquery.com" title="JQuery Aan Sayfası">Jquery</a>
	</li>
</ul>


Dış Bağlantılar

http://www.webdesignerwall.com/demo/jquery/

"http://wiki.jquery-tr.com/Animasyonlu_%C4%B0pucu_Metni_-1" adresinden alındı.