Fixed : Have you ever found a problem : out of memory : line 12 ?
Today,
I put my time on study how the jquery animation is working.
- // literal notation
- var jquery_animation_style_d = {effect:{opacity:1,left:"+=450"},style:{duration:500, easing: 'easeInOutQuart'}};
- $(document).ready(function(){
- $("#toggle_d").click(function() { jquery_animation("#animation_box_d","jquery_animation_style_d"); });
- });
- function jquery_animation(object_id,animation_style)
{
eval("$('"+object_id+"').animate("+animation_style+".effect,"+animation_style+".style);");
}
- <!-- html part -->
- <div style='float:left;width:90%;'>
<div style='background:#C8D7A4;height:100px;border:1px #E3EBD1 solid;margin:10px;position:relative;top:0px;left:0px;'>
<div id='animation_box_d' style='padding:10px;position:absolute;top:0px;left:50px;'>
<div style='background:#ECF1E0;width:150px;height:50px;line-height:50px;font-size:11px;font-family:arial;font-weight:bold;color:#6A7E38;text-align:center;'>D -> left:'+=450' (fast)</div>
</div>
</div>
</div>
<div style='float:right;width:10%;display: table-cell;'>
<div style='background:#C8D7A4;height:100px;border:1px #E3EBD1 solid;margin:10px;'>
<div id='toggle_d' style='text-align:center;font-family:arial;font-size:12px;font-weight:bold;color:#6A7E38;line-height:100px;cursor:pointer;'>Start</div>
</div>
</div>
what is the problem for the code provide above ?
first time to run animation is ok , but for the second time , you will found a error : out of memory,
why ??
according to my testing result, you are using .... animate(....literal object...);
the object has been changed, then it got error. so if you are using a animation({prop},{duration:50,.....}) there is no problem.
so don't using literal object in animate that is able to be changed
but why jquery will change it?? or anything that i present wrong?
however, i solve the problem and it will be helpful for someone who found the same problem. and i need a profession explaination for the problem come.