Skip to content

Instantly share code, notes, and snippets.

@ryuichimatsumoto-single

ryuichimatsumoto-single/gist:2923595

Created June 13, 2012 11:45
Show Gist options
  • Save ryuichimatsumoto-single/2923595 to your computer and use it in GitHub Desktop.
Save ryuichimatsumoto-single/2923595 to your computer and use it in GitHub Desktop.
Download ZIP
motion:earthquake using JQuery (JQueryを用いた地震のようなモーション)
Raw
gistfile1.js
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "+=80px"}, "slow");
$(".block").animate({"left": "-=40px"}, "slow");
$(".block").animate({"left": "+=40px"}, "slow");
$(".block").animate({"left": "-=20px"}, "slow");
$(".block").animate({"left": "+=20px"}, "slow");
$(".block").animate({"left": "-=10px"}, "slow");
$(".block").animate({"left": "+=10px"}, "slow");
$(".block").animate({"left": "-=5px"}, "slow");
$(".block").animate({"left": "+=5px"}, "slow");
$(".block").animate({"left": "-=2px"}, "slow");
});
});
</script>
<style>
div {
position:absolute;
background-color:#abc;
left:100px;
width:90px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<button id="left">実行</button>
<div class="block"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment