Animasi Muncul dan Sembunyi

oleh : aneh tapi nyata

Home > JavaScript Blogger > Animasi Muncul dan Sembunyi

Demo :

Contoh 1:

Contoh 2:

Contoh 3:

Contoh 1:

Hanya Sekedar Contoh saja.....

Contoh 2:

Hanya Sekedar Contoh saja.....

Contoh 3:

Hanya Sekedar Contoh saja.....

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah ]]></b:skin>
........
diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Animasi%20Muncul%20dan%20Sembunyi.js"></script>

<script type="text/javascript">

animatedcollapse.addDiv('nano', 'fade=1,height=80px')
animatedcollapse.addDiv('david', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=700')
animatedcollapse.addDiv('dog', 'fade=0,speed=700,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=700,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){
}

animatedcollapse.init()

</script>

Induk JQuery, jika sudah ada tidak perlu lagi !.

Penempatannya
dibawah <body>
........
diatas </body>


<p><b>Contoh 1:</b></p>
<a href='javascript:animatedcollapse.toggle("nano")'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg' border='0' /></a>

<div id="nano" style="width: 300px; background: #FFFFCC; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>

<p><b>Contoh 2:</b></p>
<a href='javascript:animatedcollapse.toggle("david")'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg' border='0' /></a>

<div id="david" style="width: 300px; background: #000; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>

<p><b>Contoh 3:</b></p>
<a href='javascript:animatedcollapse.toggle("michael")'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikugSYMvM0cq7W7QRmBhMCdaguQLOw5yag8Z9zontAmcSnM-SJQyI0xtuB4V-qJlOg7uotVHjb4r-GeCte-qGmrxu5XGFTflTaNE_Zqi73mV0qfYL34ritowKDajNsnOD8wA5azk1dXE2h/s1600/Toggle+-+Nano+Yulianto.jpg" border="0" /></a>

<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<p>Hanya Sekedar Contoh saja.....</p>
</div>

<p><b>Contoh 1:</b></p>
<a href="#" rel="toggle[cat]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="cat" style="width: 400px; background: #BDF381;">
<p>Hanya Sekedar Contoh saja.....</p>
</div>

<p><b>Contoh 2:</b></p>
<a href="#" rel="toggle[dog]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="dog" style="width: 400px; background: #BDF381;">
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
</div>

<p><b>Contoh 3:</b></p>
<a href="#" rel="toggle[rabbit]" data-openimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" data-closedimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JayLcB_Uv_FC_q409_LPSoAcsKBd6cQO7EumD4NZQnUYkVQWk2YOeLFt1pL-amlbS6wKe1RUrNQyFW2lLbYicpMk-YktDObdkFJqT5_pmdZvXy9EiiCD_bfC-gL8k765Hrf7i-C2jSeZ/s1600/expand-Nano+Yulianto.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7xERQ3Ob67olQ0dxOy9X59mZjkaxO7laBpkIIB0jNEbbPS9uSq-P2-yo018nutEeC6JKGRMxryp8vPx1oyFqR5ZzCl_TljNvmHMdDyty56sfWDhMIxcaDO2FsGiEkv3PyO-e_4e9In4S/s1600/collapse-Nano+Yulianto.jpg" border="0" /></a>

<div id="rabbit" style="width: 400px; background: #BDF381">
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
<p>Hanya Sekedar Contoh saja.....</p>
</div>

Credit : Dynamic Drive

Alhamdulillah

Title : Animasi Muncul dan Sembunyi
Description oleh : aneh tapi nyata, Home > JavaScript Blogger > Animasi Muncul dan Sembunyi Demo : Contoh 1: Hanya Sekedar Contoh saja..... Contoh 2: Hanya Sekedar...

Animasi Muncul dan Sembunyi

Demo :

Cara membuatnya

0 Response to "Animasi Muncul dan Sembunyi"

Posting Komentar