JqueryUI - Gizle

Bu bölüm tartışacak hide()jQueryUI görsel efektlerini yönetmek için kullanılan yöntemlerden biri olan yöntem. effect () yöntemi, öğeleri gizlemek için bir animasyon efekti uygular.

Sözdizimi

hide() yöntem aşağıdaki sözdizimine sahiptir -

.hide( effect [, options ] [, duration ] [, complete ] )
Sr.No. Parametre ve Açıklama
1

effect

Bu, geçiş için hangi efektin kullanılacağını belirten bir Dizedir.

2

options

Bu, Object tipindedir ve etkiye özgü ayarları ve yumuşatmayı belirtir . Ek olarak, her efektin, jQueryUI Efektleri tablosunda açıklanan birden çok efekt arasında ortak olarak belirtilebilen kendi seçenekleri vardır .

3

duration

Bu, Number veya String tipindedir ve etkinin milisaniye sayısını gösterir. Varsayılan değeri 400'dür .

4

complete

Bu, bu öğe için efekt tamamlandığında her öğe için çağrılan bir geri çağrı yöntemidir.

jQueryUI Etkileri

Aşağıdaki tablo hide () yöntemiyle kullanılabilecek çeşitli efektleri açıklamaktadır -

Sr.No. Etki ve Açıklama
1

blind

Öğeyi bir pencere kör gibi gösterir veya gizler: belirtilen yöne ve moda bağlı olarak alt kenarı aşağı veya yukarı veya sağ kenarı sağa veya sola hareket ettirerek .

2

bounce

Öğenin, isteğe bağlı olarak öğeyi göstererek veya gizleyerek dikey veya yatay yönde sekmesine neden olur.

3

clip

Ortada buluşana kadar öğenin karşıt kenarlarını birlikte hareket ettirerek öğeyi gösterir veya gizler.

4

drop

Öğeyi sayfanın üzerine düşüyor ya da düşüyormuş gibi göstererek gösterir ya da gizler.

5

explode

Sayfanın içine giriyor veya sayfadan patlıyor gibi radyal yönlerde hareket eden birden çok parçaya bölerek öğeyi gösterir veya gizler.

6

fade

Opaklığını ayarlayarak öğeyi gösterir veya gizler. Bu, çekirdek solma efektleriyle aynıdır, ancak seçenekler yoktur.

7

fold

Karşıt kenarlıkları içeri veya dışarı ayarlayarak öğeyi gösterir veya gizler ve ardından diğer kenarlık kümesi için de aynısını yapar.

8

highlight

Öğeyi gösterirken veya gizlerken anlık olarak arka plan rengini değiştirerek öğeye dikkat çeker.

9

puff

Opaklığını ayarlarken öğeyi yerinde genişletir veya daraltır.

10

pulsate

Öğenin belirtildiği gibi gösterildiğinden veya gizlendiğinden emin olmadan önce öğenin opaklığını açar ve kapatır.

11

scale

Öğeyi belirli bir yüzde oranında genişletir veya daraltır.

12

shake

Elemanı dikey veya yatay olarak ileri geri sallar.

14

size

Öğeyi belirtilen bir genişlik ve yüksekliğe yeniden boyutlandırır. Hedef boyutun nasıl belirtildiği dışında ölçeğe benzer.

15

slide

Öğeyi sayfanın üstüne veya dışına kayıyormuş gibi hareket ettirir.

16

transfer

Öğenin başka bir öğeye aktarılmış gibi görünmesini sağlayan geçici bir anahat öğesini canlandırır. Anahat öğesinin görünümü, ui-effects-transfer sınıfı veya bir seçenek olarak belirtilen sınıf için CSS kuralları aracılığıyla tanımlanmalıdır.

Örnekler

Aşağıdaki örnekler , yukarıdaki tabloda listelenen farklı efektlerle hide () yönteminin kullanımını göstermektedir .

Efekt - Kör

Aşağıdaki örnek, kör efektli hide () yönteminin kullanımını gösterir . Öğe gizlenmeden önce kör efekti görmek için Kör Efekt Gizleme düğmesine tıklayın .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
            #button { padding: .5em 1em; text-decoration: none; }
            #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
            };
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };
            
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim hideexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -

Efekt - Sallama

Aşağıdaki örnek, shake () yönteminin kör efektle kullanımını gösterir . Öğe gizlenmeden önce sallama efektini görmek için Shake Effect Hide butonuna tıklayın .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .toggler-1 { width: 500px; height: 200px; }
            #button-1 { padding: .5em 1em; text-decoration: none; }
            #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
            };
            
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };
            
            // set effect from select menu value
            $( "#button-1" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler-1">
         <div id = "effect-1" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim hideexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -