Skip to content

Instantly share code, notes, and snippets.

@danimal141

danimal141/expand_animation.html

Last active December 14, 2015 03:39
Show Gist options
  • Save danimal141/5022999 to your computer and use it in GitHub Desktop.
Save danimal141/5022999 to your computer and use it in GitHub Desktop.
Download ZIP
expand animation
Raw
expand_animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.wrap{
margin:50px;
}
.wrap::after{
display:block;
clear:both;
content:"";
}
.wrap li{
float:left;
width:60px;
height:100px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
margin:10px;
cursor:pointer;
}
.wrap li:first-child{
background-color:red;
}
.wrap li:nth-child(2){
background-color:blue;
}
.wrap li:nth-child(3){
background-color: yellow;
}
.wrap li:nth-child(4){
background-color:green;
}
.wrap li:nth-child(5){
background-color:purple;
}
.wrap li:nth-child(6){
background-color:black;
}
</style>
</head>
<body>
<ul class="wrap">
<li data-toggled="off">li要素</li>
<li data-toggled="off">li要素</li>
<li data-toggled="off">li要素</li>
<li data-toggled="off">li要素</li>
<li data-toggled="off">li要素</li>
<li data-toggled="off">li要素</li>
</ul>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).on("click","li:not(:animated)", function(){
if(!$(this).attr("data-toggled") || $(this).attr("data-toggled") == "off"){
//change data-toggled, hide display
$(this).attr("data-toggled","on");
$("li[data-toggled='off']").hide(500);
$(this).animate({
width: $(this).width() * 4,
height: $(this).height() * 4
},500);
}else if($(this).attr("data-toggled") == "on"){
$(this).animate({
width: $(this).width() / 4,
height: $(this).height() / 4
},500,function(){
$(this).attr("data-toggled", "off");
});
//show display
$("li[data-toggled='off']").show(500);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment