6. JQuery Efektler

Efektler genel olarak bir click veya bir event içerisinde çalışırlar. Event aktif olduğu zaman efekt çalışıcak vaziyette gerçekleştirilirler.

HIDE – SHOW EFEKTLERI

Aşağıdaki kod kalıbını kullanarak bir tag’a tıklandığında onu gizleyebilir ya da gösterebilirsiniz. hide metodunun içerisine yazılacak sayısal değer ise etiketin tam olarak yok olma süresini göstermektedir.

$("#hide").click(function(){
 $("p").hide(1000);
 });

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

FADE EFEKTI

<html>
 <head>
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script>

$(document).ready(function () {

 $("button").click(function () {
   $("#div1").fadeIn();
   $("#div2").fadeIn("slow");
   $("#div3").fadeIn(5000);
 });

});
 </script>

</head>
 <body>

<button>Click to fade in boxes</button><br><br>

 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
 <p>cagatay</p>

</body>
</html>

SLIDEUP-SLIDEDOWN-SLIDETOGGLE EFEKTLERI

Jquery’de panellerin veya taglerin açılır ya da kapanır menulerde olduğu gibi aşağı doğru açılıp kapanmasını isteyebilirsiniz. Bu işi slideup-down efekleriyle yapabiliriz. Slideup yukarı doğru kapama işlemini yaparken slidedown ise aşağı indirme işlemini yapmaktadır. Aslında bu efektler css property’si none olan bir elementin none özelliğini kaldırmaktan başka birşey değildir.

 <html>
 <head>
  <script src="~/Scripts/jquery-1.10.2.js"></script>
  <script>

 $(document).ready(function () {
 
 $("#toggleThis").click(function () {  //toggleThis id'li element'e tıklandığında. . .

 $("#content").slideDown();  //. . . content id'li element aşağı doğru slide şeklinde açılsın

});
 
 });
 </script>
 <style>
 
    #toggleThis{
     padding : 10px;
     width: 100%;
     background: #eee;
     border : 1px solid black;

    }
    #content {
     padding : 15px;
     width: 100%;
     text-align:center;
     font-size:20px;
     display:none;
 
  }

</style>

</head>
<body>
 
    <div id="toggleThis">Click Here</div>
    <div id="content">This is some secret of nsa</div>
 
</body>

</html>

Yukarıdaki işlemin bir tersi ise slideup efektidir. Displayı none olmayan bir elementin displayını none yapar. Bu efektler içlerine slow,fast veya milisaniye cinsinden değer parametreleri alabilirler.

Genellikle slidedown ve slideup efekti ayrı ayrı kullanılmak yerine tek seferde beraber kullanılır. Yani ilk tıklayışta div aşağı doğru açılır (slidedown) ikinci tıklayışta yukarı doğru kapanır (slideup). Bunu da yukarıdaki kodda slidedown yerine slidetoggle(); yazarak sağlayabiliriz.

CALLBACK FONKSIYONU

Javascriptte kodlar satır satır çalıştırılır. Bazen bir işlem bittiğinde bir fonksiyonun çalışmasını isteyebiliriz. Ancak o işlem bitmeden satır çalıştırıldıysa bu mümkün olmaz. Bu gibi durumlarda callback fonksiyonu devreye girer. Callback fonksiyonu, bir işlem tam olarak çalıştıktan sonra çalışacak fonksiyonu temsil eder. Hangi işlem tam olarak çalıştıktan sonra callback fonksiyonu çağırılacaksa fonksiyon ona ikinci parametre olarak verilir.

<html>  
<head>  
<script src="~/Scripts/jquery-1.10.2.js"></script>  
<script> 
   $(document).ready(function(){
    $("button").click(function(){
      $("p").hide("slow", function(){    //div tamamen hide olduktan sonra fonksiyonu çalıştırır
       alert("The paragraph is now hidden");
    });
    });
   });
</script> 
</head> 
<body> 

<button>Hide</button>

<p>This is a paragraph with little content.</p>

</body> 
</html>

CHAINING YONTEMI

Aşağıdaki gibi bir listemiz olduğunu farzedelim ve buna jquery ile bir takım özellikler ekleyelim.

$(document).ready(function () {

$(‘li’).css(‘color’, ‘blue’);
$(‘li’).slideUp(1000);
$(‘li’).slideDown(1000);
$(‘li’).attr(‘title’,’MY TİTLE’);

});

</script>

<ul>
<li>US</li>
<li>India</li>
<li>UK</li>
<li>Canada</li>
<li>Australia</li>
</ul>

şu ana kadar ki durumda hiç bir sıkıntı yok ancak biz özellikleri böyle ayrı ayrı eklemektense daha kolay ve görsel olacak şekilde zincirleme olarak ekleyebiliriz. Buna chaining yöntemi denir. Ancak burada dikkat edilmesi gereken nokta her bir jquery metodunun bir sonraki metod için tag objesi dönebiliyor olmasıdır aksi takdirde bu chaining işlemi başarısız olur. Örneğin text( ) metodu chaining içerisinde kullanılırsa chainingi bozar.

$(‘li’).css(‘color’, ‘blue’).slideUp(1000).slideDown(1000).attr(‘title’, ‘MY TİTLE’);

Kategoriler

Son Yazılar