This control of jquery is used for changing opacity of a web control.This works in two situation.
- Case : Opacity High If opacity of webcontrol is high then it decrease it's opacity to specified value between (0-1).
- Case : Opacity Low If opacity of webcontrol is low then it increase it's opacity to specified value between (0-1).
Situation
We have some text that becomes visible to specified value (if
opacity Low) or becomes invisible to specified value (if opacity Low)
when 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").fadeTo(
time-to-animate,
specified-value for opacity
);
Points
- first argument serves as how long time to animate("slow","fast" or any numeric value)
- second argument serves as opacity change between 0-1
<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">See Magic</button>
<span id="hide1">On or Off effect</span>
<script>
$("#btnclick2").click(function () {
$("#hide1").fadeTo(3000,.5);
});
</script>
</body>
</html>
No comments:
Post a Comment