Cara Menyembunyikan Div dan Text dengan jquery

jQuery adalah sebuah pemanis pada membangun laman, karena jquery mempunyai banyak method effect. Banyak yang dapat kita lakukan dengan jquery dari membangun animasi serta pengolahan data . Panduan ini akan meliputi segala method jQuery show dan hide bagi membangun efek visual.

Menampilkan dan Menyembunyikan Unsur

Command bagi menampilkan dan menyembunyikan faktor lumayan banyak seperti yang kita ketahui- show () petunjuk bagi menampilkan faktor HTML dan hide () digunakan bagi mengerjakan petunjuk menyembunyikan faktor HTML.

Â Contoh Script Show()

Berikut ialah script sederhana bagi cara show () –

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

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

Berikut ini ialah keterangan dari segala parameter –

speed – String yang mewakili diantara dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds bagi menjalankan animasi (e.g. 1000).
callback – Parameter opsional ini mewakili kegunaan yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali bagi setiap faktor yang dianimasikan.

Berikut ini ialah sintaks sederhana bagi cara hide () –

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

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

Berikut ini ialah keterangan dari segala parameter –

speed – String yang mewakili diantara dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds bagi menjalankan animasi (e.g. 1000).
callback – Parameter opsional ini mewakili kegunaan yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali bagi setiap faktor yang dianimasikan.

Contoh

Berikut contoh dari Cara Menyembunyikan Div dan Text dengan jquery, silahkan Kamu simak,

<html><br />
   <head><br />
      <title>Cara Menyembunyikan Div dan Text dengan jquery</title><br />
      <script type = “text/javascript”<br />
         src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”><br />
      </script></p>
<p>      <script type = “text/javascript” language = “javascript”><br />
         $(document).ready(function() {</p>
<p>            $(“#show”).click(function () {<br />
               $(“.mydiv”).show( 1000 );<br />
            });</p>
<p>            $(“#hide”).click(function () {<br />
               $(“.mydiv”).hide( 1000 );<br />
            });</p>
<p>         });<br />
      </script></p>
<p>      <style><br />
         .mydiv{<br />
            margin:10px;<br />
            padding:12px;<br />
            border:2px solid #f6230b;<br />
            width:100px;<br />
            height:100px;<br />
            color: #0bb4f6;<br />
         }<br />
      </style><br />
   </head></p>
<p>   <body><br />
      <div class = “mydiv”><br />
         This is a SQUARE<br />
      </div></p>
<p>      <input id = “hide” type = “button” value = “Hide” /><br />
      <input id = “show” type = “button” value = “Show” /><br />
   </body><br />
</html>

<html>

<head>

<title>Cara Menyembunyikan Div dan Text dengan jquery</title>

src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

</script>

$(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 #f6230b;

width:100px;

height:100px;

color: #0bb4f6;

}

</style>

</head>

<body>

This is a SQUARE

</div>

</body>

</html>

Dari contoh di atas karenanya akan menghasilkan output seperti di bawah ini;

Oke seperti itulah tadi pembahasan saya mengenai Cara Menyembunyikan Div dan Text dengan jquery, semoga bermanfaat.

sumber :kursuswebprogramming.com/blog/

(Visited 6 times, 1 visits today)

Leave a Reply Cancel reply