animate control of jquery provide to manipulate css property of webpage control. So that visitor can
enjoy it's effect.
Situation
We want to animate a paragraph if user click on a button.
Solution
- First identify source who generate event(above situation mouse click)
- Secon identify target on which we want to apply this effect.
- Use jquery showhide.js for implementing this task
- use jquery http://www.programmingduniya.com/common/jquery/showhide.js
$("#target_id").animate(
{css-property1:"value1",css-property2:"value2"},
time-to-animate,
function-call-after animation complete
);
Points
- As first argument of animate function we set css property that we want to change
- How long time this animation require we set from secon argument
- If animation completed and we want to perform some action then we can define callback function. Third argument not compulsory for cases
Detailed programme
<html>
<head>
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js"></script>
</head>
<body>
<button id="btnclick2">Go away</button>
<span id="hide1">I am going away don't try to stop me.</span>
<button id="btnclick3">My mistake come home</button>
<script>
$("#btnclick2").click(function () {
$("#hide1").animate(
{marginLeft:"80px"},
3000,
function(){
$("#hide1").text("It's ok. I am back to Home");
}
);
});
$("#btnclick3").click(function () {
$("#hide1").animate(
{marginLeft:"0px"},
3000,
function(){
$("#hide1").text("I am going away don't try to stop me.");
}
);
});
</script>
</body>
</html>
No comments:
Post a Comment