doctype html>
<html>
<head>
<title>Shaking animation with jQuery effects</title>
<style>
body{
text-align: center;
}
input{
margin-top:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
#box{
margin:50px auto;
width:500px;
height:100px;
color:#fff;
padding:10px;
background: orange;
}
</style>
</head>
<body>
<input type="button" value="Shake Box" class="button" />
<div id="box">Box</div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
//attach click event to button
$('.button').click(function(){
/**
* when button is clicked we call the effect jQuery UI plugin
* we use the shake effect for one sec
*/
$("#box").effect('shake', 1000 );
});
</script>
</body>
</html>
<html>
<head>
<title>Shaking animation with jQuery effects</title>
<style>
body{
text-align: center;
}
input{
margin-top:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
#box{
margin:50px auto;
width:500px;
height:100px;
color:#fff;
padding:10px;
background: orange;
}
</style>
</head>
<body>
<input type="button" value="Shake Box" class="button" />
<div id="box">Box</div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
//attach click event to button
$('.button').click(function(){
/**
* when button is clicked we call the effect jQuery UI plugin
* we use the shake effect for one sec
*/
$("#box").effect('shake', 1000 );
});
</script>
</body>
</html>
No comments:
Post a Comment