How to target parent ID outside an iframe jQuery

Question

How do I target #main from a button within an iframe using jQuery?

<div id="main">

<iframe><a class="click" href="#">a button inside a separate HTML</a></iframe>

</div>

I have this code:

$('.class').on('click', function(){
    $('#main', parent.document).animate({ 
            'bottom' : '0'
            });
});

What I wanted to do is when user clicks the button within the iframe(from a separate HTML document), it targets the #main then it will animate.