View Sidebar
JQuery ve Animasyonlar (Effects)

JQuery ve Animasyonlar (Effects)

Ekim 13, 2012 17:181 yorum

Öncelikle herkese yeniden merhabalar. Yoğun temponun arasında günlerin nasıl geçtiğini anlayamıyoruz bile. Yeni bir makale ile daha karşınızdayım.

JQuery, ilk yazımda da bahsettiğim gibi bir hazine. Bu hazinenin bir parçası da, kütüphaneye gömülü olarak gelen ve web sayfalarında sıkça kullanma ihtiyacı duyduğumuz animasyonlar. Bu makalemizde bahsettiğim animasyonların kullanımlarından bahsedeceğim. Günün başlıklarını kısaca listelemek gerekirse:

  1. .hide() / .show()
  2. .toggle()
  3. .fadeIn() / .fadeOut()
  4. .fadeTo()
  5. .fadeToggle()
  6. .slideDown() / .slideUp()
  7. .slideToggle()
  8. .animate()
  9. .queue()
  10. .dequeue()
  11. .clearQueue()
  12. .delay()
  13. .stop()
  14. .jQuery.fx.interval()
  15. .jQuery.fx.off()

Hide / Show

.hide( duration [, callback] ) / .show( duration [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

.hide(): Seçilen elementlerin gizlenmesini sağlar. Direkt .hide() olarak da kullanılabilir. Bu kullanım sonucunda herhangi bir animasyon olmadan direkt gizleme işlemi yapılacaktır.

.show(): Seçilen elementlerin gösterilmesini sağlar. Direkt .show() olarak da kullanılabilir. Bu kullanım sonucunda herhangi bir animasyon olmadan direkt gizleme işlemi yapılacaktır.

Örnek uygulama -> https://jsfiddle.net/icntfan/sfCRb/

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="#">Bana tıkla</a>
<p>Bana da tıkla</p>
<button>Kayıpları göster :)</button>
<script>
$("a").click(function ( event ) {
event.preventDefault(); // sayfada başka fonksiyonların çalışmasını önlüyoruz
$(this).hide();
});

$("p").click(function ( event ){
$(this).hide('slow'); 
});

$("button").click(function ( event ) {
$("a").show();
$("p").show('slow');
});
</script>

</body>
</html>

Örneğimizde de görebileceğiniz üzere, hide() ve show() fonksiyonlarına parametre(slow,fast,200,400,600) geçirdiğimiz zaman animasyonlu olarak işlem yaparlar.

Toggle

.toggle( [duration] [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

Seçilen elementleri gösterir veya gizler.

Örnek uygulama -> https://jsfiddle.net/icntfan/kbBH2/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
  <style>
div { background:#ebebeb;
font-weight:bold;
font-size:16px;
width: 300px;      }
</style>
</head>
<body>
  <button id="button1">Toggle</button>
<p>Merhaba</p>
<p style="display: none">Hoşçakal</p>
    <hr />
<button id="button2">Toggle</button>
    <div>Selam güzel div</div><br />
    <div>Başka güzel bir div</div>
<script>

$("#button1").click(function () {
$("p").toggle();
});
    

$("#button2").click(function () {
$("div").toggle("slow");
}); 
</script>

</body>
</html>​

“Hoşçakal” yazan paragraf varsayılan olarak gizli olduğu için, toggle sonrası kullanıcıya gösterilirken, “Merhaba” yazan paragraf gizleniyor.

Fade In / Fade Out

.fadeIn( [duration] [, callback] ) / .fadeOut( [duration] [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

.fadeIn(): Seçilen elementlerin yavaş yavaş saydamlığını azaltarak gösterilmesini sağlar.
.fadeOut(): Seçilen elementlerin solarak saydamlaşmasını sağlar.

Örnek uygulama -> https://jsfiddle.net/icntfan/ck8pw/

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:50px; height:50px; background-color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="out">Fade Out</button>
<button id="in">Fade In</button>
<div></div>
<script>
$("button#out").click(function () {
$("div").fadeOut();
});
$("button#in").click(function () {
$("div").fadeIn();
});
</script>

</body>
</html>

Fade To

.fadeTo( duration, opacity [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Opacity: Geçiş yapılacak saydamlık değeri
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

Seçilen elementlerin belirlenen saydamlığa solarak/belirerek geçmesini sağlar.

Örnek uygulama -> https://jsfiddle.net/icntfan/KSZq7/

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
[Tıklayınız] Bu yazı fade olabilir
</p>

<p>
[Tıklayınız] Bu yazı fade olmaz
</p>
<script>
$("p:first").click(function () {
$(this).fadeTo("slow", 0.33);
});
</script>

</body>
</html>

2. paragrafının neden fade olmadığını açıklamak istiyorum. $(“p:first”) ile sayfadaki tüm <p> elementlerinden ilkini (“:first”) seçtiğimi belirtiyorum. Bu yüzden 2. paragraf bu animasyondan etkilenmiyor. Önceki makalemde Seçici (Selector) konusunda verdiğim linki incelemenizi ve yine önceki makalemde JQuery alt başlığına bir göz gezdirmenizi öneriyorum.

Fade Toggle

.fadeToggle( [duration] [, easing] [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Easing: Animasyon esnasında hangi easing fonksiyonun kullanılacağını belirler. (Easing jQuery’de çalışan bir eklentidir. İçinde farklı bir çok görsel animasyon bulundurur. Detaylı bilgi için tıklayınız)
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

En basit olarak anlatacak olursak, Fade In ve Fade Out işlemlerini sırasıyla uygular.

Örnek uygulama -> https://jsfiddle.net/icntfan/Uwrgw/

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>fadeToggle button</button>
<p>Bu paragraf yavaş ve lineer bir şekilde kaybolacak, ikinci tılamada belirecek.</p>

<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
</script>

</body>
</html>

Slide Down / Slide Up

.slideDown( [duration] [, callback] ) / .slideUp( [duration] [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

.slideDown(): Seçilen elementi kayan animasyon ile gösterir.
.slideUp(): Seçilen elementi kayan animasyon ile gizler.

Örnek uygulama -> https://jsfiddle.net/icntfan/ZwdnW/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

   <style>
   div { margin:3px; width: 100px; height: 150px; background-color: red; display: none; }
   </style>
</head>
<body>
    <button id="slidedown">.slideDown()</button>
    <button id="slideup">.slideUp()</button>
    <div></div>
<script>
$('#slidedown').click(function() {
  $('div').slideDown('slow'); // Hiç parametre girmeseydik orta hızda yani 400 milisaniyede işlem yapılacaktı.
});

$('#slideup').click(function() {
  $('div').slideUp('slow');
});
</script>

</body>
</html>

Slide Toggle

.slideToggle( [duration] [, callback] )

  • Duration: Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, herhangi bir integer değer]
  • Callback: Animasyon tamamlandığında çağrılacak fonksiyon.

En basit haliyle özetleyecek olursa .slideDown() ve .slideUp() fonksiyonları arasında geçiş yapar.

Örnek uygulama -> https://jsfiddle.net/icntfan/ShxbR/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus libero, in tempor est. Nam dictum consectetur rutrum. Aliquam rhoncus accumsan dictum. Aenean scelerisque feugiat pellentesque. Curabitur at felis et lectus placerat suscipit ac id orci. Duis ac orci non leo dapibus vulputate eu imperdiet urna. Ut rutrum neque sed nulla dapibus vel porta risus tristique. Aenean eros turpis, adipiscing at faucibus semper, tincidunt vitae augue. Vestibulum gravida orci ac nulla tincidunt in lobortis urna dignissim. Cras posuere commodo urna, nec molestie sem vehicula ut. Sed non posuere lacus. Cras et lacinia libero.
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>

</body>
</html>

Animate

.animate( properties [, duration] [, easing] [, complete] )

  • Properties: Animasyon sonunda elde edeceğimiz CSS özelliklerini belirler.
  • Duration:  Animasyonun süresini belirler. Varsayılan Değer: 400. Atanabilecek değerler: [‘fast’, ‘slow’, 200,400,600, herhangi bir integer değer]. 600 Milisaniye slow değerine denk geliyor.
  • Easing: Animasyon esnasında hangi easing fonksiyonun kullanılacağını belirler.
  • Complete: Animasyon tamamlandığında  yapılacak işler için kullanılır.

JQuery .animate() metodu seçilen DOM elementin tüm sayısal CSS özelliklerini değiştirmemizi sağlar. Metodumuzun .css() metodundan farkı ise yapılan bu işlemi belirli bir süre içerisinde gerçekleştirmesidir. Diğer metot .css() ise istenen değişikliği DOM elemente anında uygulamasıdır. Metodumuz .animate()’in kullanım yelpazesi çok geniştir. Fikir olması bakımından bunlardan bazılarını paylaşmak istiyorum.
Örnek uygulama -> https://jsfiddle.net/icntfan/CcTMQ/

<!DOCTYPE html>
<html>
<head>
<style>
div {
background:#ebebeb;
width:220px;
border:2px dotted black;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="calistir">Çalıştır</button>
<div id="bolum">Selam!</div>
<script>
$("#calistir").click(function(){
$("#bolum").animate({
width: "50%",
opacity: 0.6,
marginLeft: "0.8in",
fontSize: "2em",
borderWidth: "12px"
}, 1500 );
});
</script>

</body>
</html>

Animate fonksiyonunda, gördüğümüz gibi bir çok CSS değeri aynı anda animasyonlu olarak değiştirilebiliyor. Bu fonksiyonu kullanırken dikkat edeceğimiz nokta, değerlerin sayısal değerler olmasıdır. Örneğin “background-color:#ebebeb” çalışmayacaktır.

Queue

.queue( [queueName] )

  • QueueName: Kuyruk adını belirleyen string bir ifadedir. Varsayılan olarak fx geçerlidir.

Örnek uygulama -> https://jsfiddle.net/icntfan/TK53y/

<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p>Kuyruktaki animasyon sayısı: <span></span></p>
  <div></div>
<script>
var div = $("div");

function calistir() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", calistir);
}

function goster() {
  var n = div.queue("fx");
  $("span").text( n.length );
  setTimeout(goster, 100);
}

calistir();
goster();
</script>

</body>
</html>

“Calistir” fonksiyonu çalıştıktan sonra, içerisinde bulunduğu 8 adet animasyonu sıraya sokuyor ve her bir işlemde kuyruktaki animasyon sayısı bir azalıyor.

Dequeue

.dequeue( [queueName] )

  • queueuName: Kuyruk adını içeren string ifadedir.

Metodumuz çağrıldığında kuyrukta bulunan bir sonraki fonksiyonu siler.

Örnek uygulama -> https://jsfiddle.net/icntfan/PBrqU/

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.kirmizi { background-color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Başla</button>
<div></div>
<script>
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("kirmizi");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
});
</script>

</body>
</html>

Clear Queue

.clearQueue( [queueName] )

  • queueName: Kuyruğun adını içeren string ifadedir. Standart animasyon kuyruğu “fx” dir.

Metodumuz çağrıldığı zaman, kuyrukta olan ve henüz çalıştırılmamış animasyonlar kuyruktan silinir. Argümansız olarak çağrıldığı zaman standart kuyruğumuz olan fx’teki çalıştırılmayı bekleyen tüm animasyonları siler. Bu yönüyle .stop() ile büyük benzerlik gösterir ancak, .stop() ile sadece animasyonlar ile çalışılabilirken, .clearQueue() ile kuyrukta olan tüm fonksiyonları silebiliriz.
Örnek uygulama -> https://jsfiddle.net/icntfan/MVMGY/

<!DOCTYPE html>
<html>
<head>
  <style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
div.yenirenk { background:blue; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="basla">Başla</button>
<button id="dur">Dur</button>
<div></div>
<script>
$("#basla").click(function () {

  var myDiv = $("div");
  myDiv.show("slow");
  myDiv.animate({left:'+=200'},5000);
  myDiv.queue(function () {
    var _this = $(this);
    _this.addClass("yenirenk");
    _this.dequeue();
  });

  myDiv.animate({left:'-=200'},1500);
  myDiv.queue(function () {
    var _this = $(this);
    _this.removeClass("yenirenk");
    _this.dequeue();
  });
  myDiv.slideUp();

});

$("#dur").click(function () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});</script>

</body>
</html>

Delay

.delay( duration [, queueName] )

  • duration: Kuyrukta işletilmeyi bekleyen bir sonraki fonksiyon için kaç milisaniye bekletileceğini belirler.
  • queueName: Gecikme işleminin uygulanacağı kuyruğu belirler. Varsayılan olarak fx kullanır.

Örnek uygulama ->https://jsfiddle.net/icntfan/yHEpc/

<!DOCTYPE html>
<html>
<head>
<style>
div { position: absolute; width: 60px; height: 60px; float: left; }
.birinci{ background-color: #3f3; left: 0;}
.ikinci{ background-color: #33f; left: 80px;}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p><button>Çalıştır</button></p>
<div class="birinci"></div>
<div class="ikinci"></div>

<script>
$("button").click(function() {
$("div.birinci").slideUp(400).delay(1000).fadeIn(600);
$("div.ikinci").slideUp(400).fadeIn(600);
});
</script>

</body>
</html>

Stop

.stop( [clearQueue] [, jumpToEnd] )

  • clearQueue: Durdurulacak animasyonun kuyruktan silinip silinmeyeceğini belirtir. Varsayılan olarak “false” değeri atanmıştır.
  • jumpToEnd: Yürürlükteki animasyonun tamamlandıktan sonra mı yoksa hemen mi durdurulacağını belirtir.

Animasyonları durdurmak için kullanılır.

Örnek uygulama -> https://jsfiddle.net/icntfan/VtrYP/

<!DOCTYPE html>
<html>
<head>
  <style>div {
position: absolute;
background-color: #ebebeb;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="ileri">ileri</button>
<button id="dur">DUR!</button>
<button id="geri">Geri</button>
<div class="block"></div>
<script>
/* Start animation */
$("#ileri").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});

/* Stop animation when button is clicked */
$("#dur").click(function(){
$(".block").stop();
});

/* Start animation in the opposite direction */
$("#geri").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});

</script>

</body>
</html>

jQuery.fx.interval

Animasyonlar için saniyede kaç kare oynatılacağını belirler. Varsayılan olarak 13 milisaniye belirlenmiştir. Bu değeri düşürmek daha yumuşak geçişler sağlayacaktır ancak, performansa ve CPU kullanımına etkileri olacaktır.

Örnek uygulama -> https://jsfiddle.net/icntfan/eQtV5/

<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:50px; height:50px; margin:5px; float:left;
          background:red; }
    </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="button" value="Çalıştır"/></p>
<div></div>
<script>
jQuery.fx.interval = 100;

$("input").click(function(){
  $("div").toggle( 3000 );
});
  </script>

</body>
</html>

jQuery.fx.off

Tüm animasyonları devre dışı bırakarak, animasyonlarından son hallerine bir anda geçiş yapmayı sağlar. 2 adet kullanım sebebi olabilir.

  1.  Düşük kaynaklı (donanımsal ve yazılımsal olarak) cihazlar (telefonlar gibi)
  2. Kullanıcı animasyonlara erişim sıkıntısı yaşıyorsa. (Daha fazla bilgi -> https://www.jdeegan.phlegethon.org/turn_off_animation.html)
Varsayılan olarak “true” değeri atanmıştır. İstenen her an değer true/false şeklinde değiştirilebilir.

Örnek uygulama -> https://jsfiddle.net/icntfan/SeEfB/

<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:50px; height:30px; margin:5px; float:left;
          background:blue; }
    </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="button" value="Çalıştır"/> <button>Toggle fx</button></p>
<div></div>
<script>
var toggleFx = function() {
  $.fx.off = !$.fx.off;
};
toggleFx();

$("button").click(toggleFx)

$("input").click(function(){
  $("div").toggle("slow");
});
  </script>

</body>
</html>

Faydalanılan kaynaklar:
1-) JQuery documentation -> Effects | https://api.jquery.com/category/effects/

1 Yorum

Yanıtla