jQuery - Efektler

jQuery, çeşitli türlerde şaşırtıcı efektler yapmak için son derece basit bir arayüz sağlar. jQuery yöntemleri, yaygın olarak kullanılan efektleri minimum konfigürasyonla hızlı bir şekilde uygulamamıza olanak tanır. Bu eğitim, görsel efektler oluşturmak için tüm önemli jQuery yöntemlerini kapsar.

Öğeleri Gösterme ve Gizleme

Öğeleri gösterme ve gizleme komutları hemen hemen beklediğimiz şeydir - show() öğeleri sarılmış bir sette göstermek ve hide() onları saklamak için.

Sözdizimi

İşte basit sözdizimi show() yöntem -

[selector].show( speed, [callback] );

İşte tüm parametrelerin açıklaması -

speed - Önceden tanımlanmış üç hızdan ("yavaş", "normal" veya "hızlı") birini veya animasyonu çalıştırmak için gereken milisaniye sayısını (örneğin 1000) temsil eden bir dize.
callback- Bu isteğe bağlı parametre, animasyon tamamlandığında yürütülecek bir işlevi temsil eder; animasyon uygulanmış her öğe için bir kez çalıştırılır.

Aşağıdakiler için basit sözdizimi hide() yöntem -

[selector].hide( speed, [callback] );

İşte tüm parametrelerin açıklaması -

speed - Önceden tanımlanmış üç hızdan ("yavaş", "normal" veya "hızlı") birini veya animasyonu çalıştırmak için gereken milisaniye sayısını (örneğin 1000) temsil eden bir dize.
callback- Bu isteğe bağlı parametre, animasyon tamamlandığında yürütülecek bir işlevi temsil eder; animasyon uygulanmış her öğe için bir kez çalıştırılır.

Misal

Küçük bir JQuery kodlamasına sahip aşağıdaki HTML dosyasını düşünün -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

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

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Öğeleri Değiştirmek

jQuery, öğelerin görüntü durumunu açık veya gizli arasında değiştirmek için yöntemler sağlar. Öğe başlangıçta görüntüleniyorsa, gizlenecektir; gizlenmişse gösterilecektir.

Sözdizimi

İşte şunlardan biri için basit sözdizimi toggle() yöntemler -

[selector]..toggle([speed][, callback]);

İşte tüm parametrelerin açıklaması -

speed - Önceden tanımlanmış üç hızdan ("yavaş", "normal" veya "hızlı") birini veya animasyonu çalıştırmak için gereken milisaniye sayısını (örneğin 1000) temsil eden bir dize.
callback- Bu isteğe bağlı parametre, animasyon tamamlandığında yürütülecek bir işlevi temsil eder; animasyon uygulanmış her öğe için bir kez çalıştırılır.

Misal

Bir resim içeren basit bir <div> gibi herhangi bir öğeyi canlandırabiliriz -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

JQuery Etkisi Yöntemleri

JQuery Etkilerinin temel kavramını gördünüz. Aşağıdaki tablo, farklı efekt türleri oluşturmak için tüm önemli yöntemleri listelemektedir -

Sr.No.	Yöntemler ve Açıklama
1	animate (parametreler, [süre, hareket hızı, geri arama]) Özel animasyonlar yapmak için bir işlev.
2	fadeIn (hız, [geri arama]) Opaklıklarını ayarlayarak ve tamamlandıktan sonra isteğe bağlı bir geri arama başlatarak tüm eşleşen öğeleri soldurun.
3	fadeOut (hız, [geri arama]) Opaklıklarını 0 olarak ayarlayıp ardından görüntülemeyi "yok" olarak ayarlayarak ve tamamlandıktan sonra isteğe bağlı bir geri aramayı tetikleyerek tüm eşleşen öğeleri karartın.
4	fadeTo (hız, opaklık, geri arama) Eşleşen tüm öğelerin opaklığını belirtilen bir opaklığa azaltın ve tamamlandıktan sonra isteğe bağlı bir geri aramayı tetikleyin.
5	saklamak( ) Gösteriliyorlarsa, eşleşen her öğe kümesini gizler.
6	gizle (hız, [geri arama]) Zarif bir animasyon kullanarak ve tamamlandıktan sonra isteğe bağlı bir geri aramayı tetikleyerek tüm eşleşen öğeleri gizleyin.
7	göstermek( ) Gizlenmişlerse, eşleşen öğeler kümesinin her birini görüntüler.
8	göster (hız, [geri arama]) Zarif bir animasyon kullanarak ve tamamlandıktan sonra isteğe bağlı bir geri aramayı çalıştırarak eşleşen tüm öğeleri gösterin.
9	slideDown (hız, [geri arama]) Yüksekliklerini ayarlayarak ve tamamlandıktan sonra isteğe bağlı bir geri arama başlatarak tüm eşleşen öğeleri ortaya çıkarın.
10	slideToggle (hız, [geri arama]) Tüm eşleşen öğelerin yüksekliğini ayarlayarak ve tamamlandıktan sonra isteğe bağlı bir geri arama başlatarak görünürlüğünü değiştirin.
11	slideUp (hız, [geri arama]) Tüm eşleşen öğeleri, yüksekliklerini ayarlayarak ve tamamlandıktan sonra isteğe bağlı bir geri arama başlatarak gizleyin.
12	durdur ([clearQueue, gotoEnd]) Belirtilen tüm öğelerde o anda çalışan tüm animasyonları durdurur.
13	geçiş () Eşleşen öğeler kümesinin her birini görüntülemeye geçin.
14	geçiş (hız, [geri arama]) Uyumlu bir animasyon kullanarak her bir eşleşen öğe kümesini görüntülemeyi ve tamamlandıktan sonra isteğe bağlı bir geri aramayı çalıştırmayı değiştirin.
15	geçiş anahtarı ) Anahtara bağlı olarak eşleşen her öğe kümesini görüntülemeyi aç / kapat (true tüm öğeleri gösterir, false tüm öğeleri gizler).
16	jQuery.fx.off Tüm animasyonları genel olarak devre dışı bırakın.

UI Kitaplığı Tabanlı Efektler

Bu efektleri kullanmak için en son jQuery UI Kitaplığını indirebilirsiniz. jquery-ui-1.11.4.custom.zipdan jQuery UI Library veya kullanımı Google CDN jQuery için yapmış gibi benzer şekilde kullanmak.

JQuery UI için Google CDN'yi HTML sayfasında aşağıdaki kod parçacığını kullanarak kullandık, böylece jQuery kullanıcı arayüzünü kullanabiliyoruz -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Yöntemler ve Açıklama
1	Kör Öğeyi kör eder veya körleştirerek gösterir.
2	Sıçrama Öğeyi n kez dikey veya yatay olarak sıçratır.
3	Klips Öğeyi dikey veya yatay olarak açar veya kapatır.
4	Düşürmek Öğeyi düşürür veya içine bırakarak gösterir.
5	Patlat Öğeyi birden çok parçaya ayırır.
6	Kat Öğeyi bir kağıt parçası gibi katlar.
7	Vurgulamak Arka planı belirli bir renkle vurgular.
8	Puf Ölçek ve karartma animasyonları nefes efekti yaratır.
9	Nabız Öğenin opaklığını birden çok kez titreştirir.
10	Ölçek Yüzde faktörü ile bir öğeyi küçültün veya büyütün.
11	Sallamak Öğeyi dikey veya yatay olarak n kez sallar.
12	Boyut Bir öğeyi belirtilen genişlik ve yüksekliğe yeniden boyutlandırın.
13	Kaymak Öğeyi görüntü alanının dışına kaydırır.
14	Aktar Bir elemanın dış hatlarını diğerine aktarır.