How do I animate a div on the parent of my iframe using Jquery?

Posted on 2011-05-09
Last Modified: 2012-05-11
I have a main page and on it I have an iframe and a div.
Inside the iframe I have an external html page with a button on it.
Using this button inside the iframe how do I animate the div on my parent page?

I have tried something like this:
            $("top").contents().find("#iFrameID").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 the Jquery files I am using.

Question by:badwolfff
    LVL 14

    Expert Comment


    Author Comment

    thanks for the idea robasta
    doesn't work

    Accepted Solution

    I found a workaround myself:

    create a function

    function move(){
         $("#iFrameID").animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});

    and I run it using top.move

    However it is strange that no one at this forum or on the jquery forum knew how to sort this simple problem considering that we all use iframes and this kind of problem should be pretty common.

    thanks all anyway for trying

    Author Closing Comment

    I worked it out myself

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now