jQuery ile animasyonlu buton örneği
jQuery gün geçtikçe daha çok kullanılmaya başlıyor. Çünkü az kodla çok büyük işler yapmamızı sağlıyor. Ayrıca sitede flash kullanmadan görselliği arttırabilmemize olanak sağlıyor. Şimdi bunlardan bir tanesini yapacağız. Başlamadan önce yapacağımız örneğin demosuna buradan bakabilirsiniz veya kaynak kodları buradan indirebilirsiniz.
Her zaman olduğu gibi önce HTML kısmını yazıyoruz. index.html
<div id="menu"> <ul> <li><a href="#">Google</a> <li><a href="#">Yahoo</a> <li><a href="#">Youtube</a> </ul> </div>
Şimdi de biraz stil düzenlemesi yapmak için CSS dosyasını oluşturuyoruz. stil.css
#menu ul{list-style:none;}
#menu ul li a {
width:150px;
height:35px;
font-size:24px;
font-family:Trebuchet MS;
text-decoration:none;
border:2px solid #DF7401;
display:block; text-align:left;
vertical-align:middle;
margin-bottom:10px;
color:#1C7DC5;
background-image:url(bg.png);
background-repeat:no-repeat;
background-color:#fff;
}
#menu ul li a:hover{
color:#DF7401;
}
Son olarak jQuery kodlarını yazıyoruz. main.js
$(document).ready(function(){
var menu = $('#menu ul li a');
var bgPosX = [110,150];
var bgPosY = [10,10]
var textInd = [5,15];
menu.css({textIndent:textInd[0],backgroundPosition:bgPosX[0]+' '+bgPosY[0]});
menu.mouseover(function(){
$(this).animate({textIndent:textInd[1]+'px',backgroundPosition:bgPosX[1]+' '+bgPosY[1]},'fast');
});
menu.mouseleave(function(){
$(this).animate({textIndent:(textInd[0]-4)+'px',backgroundPosition:(bgPosX[0]-10)+' '+bgPosY[0]},'fast').animate({textIndent:textInd[0],backgroundPosition:bgPosX[0]+' '+bgPosY[0]},'fast')
});
})
Burada önce menu isminde bir deÄŸiÅŸken tanımlayıp deÄŸer olarak ‘#menu ul li a’ ayarlıyoruz. bgPosX arkaplan resminin yatay pozisyonunun ilk ve son deÄŸerlerini içeriyor. bgPosY ise arkaplan resminin dikey ilk ve son pozisyonlarını içeriyor. textInd ise linke yazdığımız metnin textIndent deÄŸerlerini içeriyor.
Başlangıç değerlerini atadıktan ilk css değerlerini atıyoruz. Sonra da mouseover ve mouseleave fonksiyonlarına olayları yazıyoruz. mouseleave olayında iki tane animate yazmamızın sebebi görselliği arttırmak için iki defa hareket oluşturmamız.
HTML dosyasında js dosyalarını çekmeyi de unutmayalım
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="main.js" ></script>
