Menampilkan Konten Dengan Efek Show Bounce Jquery UI

Hallo teman-teman Dumet School, Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas artikel tentang cara Menampilkan Konten Dengan Efek Show Bounce Jquery UI. Dimana efek dari show bounce akan membuat tampilan suatu element atau objek seperti di shake dari atas dan bawah.

Oke teman-teman untuk dapat mengetahui cara Menampilkan Konten Dengan Efek Show Bounce Jquery UI kita buat terlebih dahulu tampilan dari htmlnya. Teman-teman bisa salin script di bawah ini.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Menampilkan Konten Dengan Efek Show Bounce Jquery UI</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>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Dumet School</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">Tampilkan Efek</a>
   </body>
</html>

<!doctype html>

<head>

<title>Menampilkan Konten Dengan Efek Show Bounce Jquery UI</title>

rel = "stylesheet">

<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>

</head>

<body>

<h3 class = "ui-widget-header ui-corner-all">Dumet School</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>

</div>

<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Tampilkan Efek</a>

</body>

</html>

Disini teman-teman bisa perhatikan script di atas. Dimana tampilannya saya menggunakan css dari jquery ui dan sebelum membuat script jquerynya teman-teman pastikan terlebih dahulu bahwa link jquery js dan jquery ui js nya sudah terpasang. Lalu langkah terakhir untuk membuat efek show bounce, kita buat script jquerynya seperti script di bawah ini.

<script>
         $(function() {
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "bounce", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>

$(function() {

function runEffect() {

// run the effect

$( "#effect" ).show( "bounce", {times: 10,distance: 100}, 1000, callback);

};

//callback function to bring a hidden box back

function callback() {

setTimeout(function() {

$( "#effect:visible" ).removeAttr( "style" ).fadeOut();

}, 1000 );

};

$( "#button" ).click(function() {

runEffect();

return false;

});

$( "#effect" ).hide();

});

</script>

Nah disini teman-teman bisa perhatikan script di atas. Dimana ketika tombol diklik maka efek dari show bounce yang sudah kita buat di dalam function akan di jalankan. Jika teman-teman jalankan di browser masing-masing maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Menampilkan Konten Dengan Efek Show Bounce Jquery UI. Semoga dapat bermanfaat dan selamat mencoba guys.

Menampilkan Konten Dengan Efek Show Bounce Jquery UI

Facebook DUMET School

Categories