Using jquery how can I show an element on hover and hide on click
<p><a href="http://jsfiddle.net/wetVX/1/" rel="nofollow">jsFiddle</a></p>

<p>I am trying to do some thing I'd like to think is simple.  </p>

<p>animate a partially hidden element on hover, then when i click it, close it.</p>

<pre><code>$('#call-to-action').hover(function(){
                $('#call-to-action').animate({
                    right: '0px'                                                    
                }, 1000);
                $('.cta-open').hide();
                $('.cta-close').show();
            });

            $('.cta-close').click(function(){
                $('#call-to-action').animate({
                    right: '-364px'                                                 
                }, 1000);
                $('.cta-close').hide();
                $('.cta-open').show();
                stop();

            });
</code></pre>

<p>the fiddle has the code I am using  as well as the elements.</p>

<p>any ideas?</p>
