Using .animate() with .data() -> stack overflow

Using .animate() with .data() -> stack overflow

Hi,
I think i found a problem in jQuery.
If you store the options and properties for el.animate() in el.data(), it will end up in an stack overflow.

jQuery version: 1.4.2.min
Firefox version: 3.6

The way i used it:
I stored the information in data() on pageload. When calling the animate function, i recieve them from data(), and pass them to animate().
This works, if you only call the animate function once. (e.g. to hide a div)
If you call it again in order to show the div, you will have firefox posting endless "too much recursion" errors in the console, until you close the tab.

I think i found the reason why:
Before animate() is called, the "animationoptions" object in .data() only is: { 'duration' : 150 }
After the call, there are 2 more elements in the object:
old: undefined
complete: function()

(see attached picture)

The function directs to the jQuery-core, I can't give you more information using the min-version.


Based on this information, i was able to build a workaround:
When receiving the info from data(), i clone the objects using extend(), and pass the clone to animate().

Heres an example code.
There are 2 buttons, one calls the buggy version on a div, and one calls the version with workaround on another div. Both divs get the same information on pageload.
Make sure you try to click the buttons more then 1 time, and watch firebug console.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>Test page</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
       </head>
       <body>
       <div id="notworking" style="border: 1px solid red;">
       This one is not working.
       </div>
       <br>
       <div id="working" style="border: 1px solid black;">
       This one is working.
       </div>
       
       <input type="button" id="buttonNotWorking" value="try not working example (watch firebug console!!)">
       <input type="button" id="buttonWorking" value="try working example">
          <script type="text/javascript">
          $(document).ready(function(){
            $("#notworking").data("animationproperties", { opacity: 0.25, left: '+=50', height: 'toggle' });
            $("#notworking").data("animationoptions", {'duration':150});
            $("#working").data("animationproperties", { opacity: 0.25, left: '+=50', height: 'toggle' });
            $("#working").data("animationoptions", {'duration':150});
            
            $("#buttonNotWorking").bind('click', function(){
                var divNotWorking = $("#notworking");
                
                var anprop = divNotWorking.data("animationproperties");
                var anopt = divNotWorking.data("animationoptions");
                
                divNotWorking.animate(anprop, anopt);
            });
            $("#buttonWorking").click(function(){
                var divWorking = $("#working");
                
                var anprop = divWorking.data("animationproperties");
                var anopt = divWorking.data("animationoptions");
                // clone the objects
                var anpropClone = jQuery.extend(true, {}, anprop);
                var anoptClone = jQuery.extend(true, {}, anopt);
            
                divWorking.animate(anpropClone, anoptClone);
            });
            
          });
          
          
          </script>
          
       </body>
    </html>



















































Hope this helps.