Merhaba, Jquery animate özelliğinin padding ile kullanımından bahsedeceğim. Olabildiğince basit bir dille anlatacağım.
İlk olarak aşağıda verdiğim js kütüphanelerini indirip sayfanızın ana dizinine koyun. Uygulamanın çalışacağı sayfanın <head></head> kodları arasına aşağıdaki satırkarı ekleyelim.
<script src=" jquery-1.6.2.min.js"></script>
<script src=" jquery.easing.1.3.js"></script>
Sonra yine aynı tagler arasına(<head></head>) aşağıdaki kodumuzu yazalım.
<script>
$(function () {
$('.list li a').hover(function ()
{
$(this).stop().animate({ paddingLeft: '15px', paddinfRight: '0' }, 'fast', 'easeInQuad') }, function () {
$(this).stop().animate({ paddingLeft: '0', paddinfRight: '15px' }, 'slow', 'easeOutBounce') });
})
</script>
Sayfanın <body></body> tagleri arasına aşağıdaki kodu yazalım.
<ul class="list ">
<li><a href="#">Denem içerik 1</a></li>
<li><a href="#"> Denem içerik 2</a></li>
</ul>
Jquery kütüphanelerini indir
Sayfayı çalıştırıp test edebilirsiniz :)
