JQuery For Animate Mouse Enter & Leave
Step 1:
Creating Html
Example:
<head>
<title>Magic!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="black"></div>
</body>
</html>
step 2:
Creating Stylesheet.css
div {
height:100px;
width:100px;
display: inline-block;
}
#red
{
background-color:#FF0000;
}
#blue
{
background-color:#0000FF;
}
#yellow
{
background-color:#E2BE22;
}
#green{
background-color:#008800;
}
#black
{
background-color:black;
}
step 3:
creating script.js
$(document).ready(function()
{
$('div').mouseenter(function()
{
$(this).animate({
height: '+=20px'
});
});
$('div').mouseleave(function()
{
$(this).animate({
height: '-=20px'
});
});
$('div').click(function()
{
$(this).toggle(1000);
});
});
( this ) is a current instant, animate() is a method in JQuery for animating the element ,now increase height of <div> element
let see o/p
OutPut
No comments:
Post a Comment