[jQuery] Not able to Animate Initially Hide DIV
Hi All,,,
I have some problem to Animate a DIV for which i have set Display
property none initially....
I want to animate that div in perticular event....
here is my code........
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.2.pack.js" type="text/javascript"></
script>
<script language="JavaScript" type="text/javascript"
src="jquery.animate.clip.js"></script>
<script language="JavaScript" type="text/javascript">
function ani() {
var f =document.getElementById('themes');
$("#" + f.id).show();
$("#" + f.id).stop().animate({ 'clip': 'rect(0px 400px 300px
0px)' }, 1000)
}
function gon() {
$('.popUpBg').stop().animate({ 'clip': 'rect(150px 200px 150px
200px)' }, 1000)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="A1" href="#" onclick='ani();' class="linkBlue">Click Me</
a><br />
<input type="button" value="gone" onclick="gon();">
<div class="popUpBg" id="themes" style="display: none; position:
absolute; height: 400px;
width: 300px; clip: rect(0px 400px 300px 0px);">
<img src="Images/click45.jpg" />
</div>
</form>
</body>
</html>
and jquery.animate.clip.js Code............
(function(jQuery) {
//alert('jQuery');
jQuery.fx.step.clip = function(fx) {
if (fx.state == 0) {
var cRE = /rect\(([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)
[,]? ([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)\)/;
fx.start = cRE.exec(fx.elem.style.clip.replace(/,/g, ''));
fx.end = cRE.exec(fx.end.replace(/,/g, ''));
}
var sarr = new Array(), earr = new Array(), spos =
fx.start.length, epos = fx.end.length,
emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css
('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt
(emOffset * fx.start[ss])); }
for (var es = 1; es < epos; es += 2) { earr.push(parseInt
(emOffset * fx.end[es])); }
fx.elem.style.clip = 'rect(' +
parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
}
})(jQuery);