How do I animate a div inside an iframe using Jquery?

I have a main page and on it I have a button and an iframe. Inside the iframe I have an external html page with a div on it. Using the button on the main page how do I animate the div inside the iframe?

I have tried something like this:
            $("#iFrameID").contents().find("#divID").animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});

This does not work. Could anyone show me how to fix this code?
I am attaching a test project here.
Who is Participating?
badwolfffAuthor Commented:
You can reload the iframe, with some parameters, for it to animate. <iframe src='externalpage.html?animate=1'>

and ofcourse make the externalpage.html, trigger the script on the GET animate = 1
badwolfffAuthor Commented:
sorry could you please illustrate with an example?
I didn't really understand your explanation.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.