jQuery animate fonksiyonu ile Css nesnelerini kullanabilir ve hareketli web elementleri yapabiliriz. Örneğin aşağıdaki kodların neler yapabildiğini açıklayalım.
1. $(document).ready(function() {
2. $('#easingExample1').click(function(event) {
3. $(this)
4. .animate({ marginLeft: '500px', opacity: '0.2' },{duration: 'slow',easing: 'easeOutBack'})
5. .animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBack'});
6. });
7. });
1. Satırımız sayfamız yüklendikten sonra aşağıdaki işlemleri yap işlevi görüyor.
2. Satırda easingExample1 id'sine sahip (Div, Buton, Span vb..) Nesne tıklandığında aşağıdaki satırları gerçekleştir.
3. Satırda this easingExample1 id sini alıyor easingExample1 id si nde aşağıdaki işlemleri yap anlamında, onu $('.islemyapilacakClass') olarakta değiştirebilirsiniz. Tıklanan butonla işlem yapılacak Nesneyi farklı belirlemiş olursunuz. başındaki nokta (.) Class, Dies (#) ise id yi ifade eder.
4. Satırda bir üst sarıtdan aldığın $('#easingExample1'). id sine animate fonksiyonunu uygula deniliyor ve şu adımlar uygulanıyor:
5. satırda 4. satırdaki gibi ile git dediğimiz Divimiz e geri gel diyoruz. Ve görünürlüğünü %100 yap.
6. }); bu taglar herbir function u kapatıyor.
7. sayfa yüklenme function kapatma.
Aşağıdaki resimde görebileceğiniz gibi Dreamweaver gibi web editorlerinde virgün koyduktan sonra hangi STYLE nesnelerini kullanabileceğinizi görebilirsiniz. 26 tane sag, sol, çerçeve, yazı büyüklüğü ... gibi birçok özelliğe animate fonksiyonu kullanabilirsiniz.
Aşağıdaki örnekte div nasıl hareketlendirilir göstermek istedim özellikler artırılarak Navigate Menü vb.. uygulamalar yapabilirsiniz. Javascript ile Div hareketlendirmek jQuery ile çok daha kolay kullanılabiliyor.
Ön izleme:
Not: jQuery Kütüphaneleri include etmeyi unutmuyoruz üst resimdeki 1. ve 2. satırlar. Sayfada fazla uzun süreli hareketler uyguladığınızda işlemler karışabilir daha hızlı ve ayrı fonksiyonlar kullanmanız tavsiye edilir. Örneğimi hızlı hızlı tıklayarak test edebilirsiniz karışmayı :)
<script type="text/javascript" src="http://limitsizbilgi.com/js/jquery.min.1.7.1.js"></script>
<script type="text/javascript" src="http://limitsizbilgi.com/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#easingExample1').click(function(event) {
$(this)
.animate({ marginLeft: '500px', opacity: '0.2', },{duration: 'slow',easing: 'easeOutBack'})
.animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBack'});
});
$('#easingExample2').click(function(event) {
$(this)
.animate({ marginLeft: '500px', opacity: '0.2' },{duration: 'slow',easing: 'easeOutBounce'})
.animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBounce'});
});
$('#easingExample3').click(function(event) {
$(this)
.animate({ marginLeft: '500px', opacity: '0.2', },{duration: 'fast',easing: 'easeOutElastic'})
.animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutElastic'})
.animate({ marginTop: '50px', opacity: '0.5' },2000)
.animate({ marginTop: '5px', opacity: '1' },500);
});
});
</script>
<div>
<div id="easingExample1" style="width:300px; height:30px; background:#330099; color:#FFF; cursor:pointer; margin:5px;"> Örnek 1 Tıkla (easeOutBack)</div>
</div>
<div>
<div id="easingExample2" style="width:300px; height:30px; background:#330099; color:#FFF; cursor:pointer; margin:5px;"> Örnek 2 Tıkla (easeOutBounce)</div>
</div>
<div>
<div id="easingExample3" style="width:300px; height:30px; background:#330099; color:#FFF; cursor:pointer; margin:5px;"> Örnek 3 Tıkla (easeOutElastic)</div>
</div>
// Bu kodlarla bir html sayfada Div e javascript ile nasıl hareket veya diğer efektler verebiliriz onları görmüş oluyoruz. JQuery animate onksiyonu html taglara Css nesnelerinde değişiklik yapmamızı sağladığı için normal js kodlardan yapacağımız sayfalardan daha hatasız ve hızlı sonuçlar almamızı sağlıyor.
Konu (105) ile ilgili admin @ limitsizbilgi.com adresine E-mail gönderebilirsiniz. İsa Şahintürk