Blog
Spoiler
Demo :
Spoiler
Code :
<div style="margin-top:5px">
<div style="margin-bottom:8px">
<b>Spoiler :</b>
<input type="button" value="Show" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('spoilers')[0]; if ( spoiler.style.display == 'none' ){$(spoiler).fadeIn('slow'); this.value = 'Hide'; }else{$(spoiler).slideUp(); $(spoiler).fadeOut('slow'); this.value = 'Show'; };" />
<div style="margin:0px;padding:4px;border:1px inset;background:white;">
<spoilers style="display:none;">
CONTENTS
</spoilers>
</div>
</div>
</div>
Download :
https://www.box.com/s/b113027f3f80d92ff724
Animation List
Demo :
- Test 1
- Test 2
- Test 3
- Test 4
- Test 5
Code :
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul li').addClass('animasi');
$(".animasi").hover(function(){
$(this).animate({left:'20'
}, 200);
},function(){
$(this).animate({left:'0'
}, 200);
});
});
</script>
<style>
.animasi li{
position:relative;
cursor:pointer;
border-bottom:1px dotted green;
width:620px;
}
.animasi li:hover{
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<ul>
<li>Test.</li>
<li>Test.</li>
<li>Test.</li>
<li>Test.</li>
<li>Test.</li>
</ul>
</body>
</html>
Download :
https://www.box.com/s/256ab57fbc7405fbcdb6
