How to addClass and/or animate an element inside an iframe
<p>I have created a widget that other people can load into their html via an iframe.  Everything is working fine to load my custom js file (as the iframe src) into the iframe.  I'm also loading jquery from ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.  My custom js then loads and parses some json at various intervals with $.get() from a server on the same domain as the js file.  I use the json to create html elements that I add inside the iframe.  Again, all of this is working as expected.</p>

<p>The problem that I'm having is that I want to animate the html that I've added inside the iframe.  I'm using the following functions to handle the animation:</p>

<pre><code>function embeddedUnMarkAsNew($el) {
    $el.animate({color:"black"}, 500)
}

function embeddedMarkAsNew(timeToMark, $el){
    alert("marking for this time: "+timeToMark)
    //start animation
    $el.animate({color:"red"}, 500);
    //end animation when duration runs
    setTimeout(function() { 
        embeddedUnMarkAsNew($el);
    }, timeToMark)
    return false
}
</code></pre>

<p>The alert inside of embeddedMarkAsNew() triggers with the proper timeToMark, but the element does not animate.  I've changed the animation to an addClass() just to try it out, and although the class does show up in the inspector as being added, the element itself does not reflect this added class.</p>

<p>I've used this technique on elements outside of iframes.  What is it about doing this inside an iframe that is causing my problems???</p>

<p>Thanks</p>
