Testcase for jQuery Ticket 6309

Storing animation data on element

by jitter

HTML

<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">

JavaScript

$("#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"),
        anprop = divNotWorking.data("animationproperties"),
        anopt = divNotWorking.data("animationoptions");
    divNotWorking.animate(anprop, anopt);
});
$("#buttonWorking").click(function() {
    var divWorking = $("#working"),
        anprop = divWorking.data("animationproperties"),
        anopt = divWorking.data("animationoptions"),
        // clone the objects
        anpropClone = jQuery.extend(true, {}, anprop),
        anoptClone = jQuery.extend(true, {}, anopt);
    divWorking.animate(anpropClone, anoptClone);
});