Bağlantıda sorun var !!! Jquery animate padding
Jquery animate padding facebook paylaş Jquery animate padding twitter paylaş Jquery animate padding google plus paylaş Jquery animate padding linkedin paylaş
05.12.2013
Perşembe

Jquery animate padding


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 :)


[ YORUM YAZ ] [ YAZDIR ]
Anahtar kelimeler: jquery, padding, animate

Yazan: dotnet
Yorum: Ellerine sağlık.
Yazan: Berkan
Yorum: easing.js fena zamanda işe yarar