Jquery divs slide

Question

The link: www.goo.gl/prrRRT

I want the div with the question mark to slide full out (like how its now) when i hover and after when im not hover then he slide back that you only see the question mark. This is my jquery for now.

<script>
    $('.vraagteken_container').hover(function() {
        $('.vraagteken_container').hide('slide', {direction: 'right'}, 1000);
        $('.vraagteken_container').show('slide', {direction: 'left'}, 1000);
    });
</script>

How can i do this?

Answer 1

the jquery hover() takes in two functions: in and out events...

http://api.jquery.com/hover/

so modify your code like so:

<script>
    $('.vraagteken_container').hover(function() {
        $('.vraagteken_container').hide('slide', {direction: 'right'}, 1000);
},
function() {
        $('.vraagteken_container').show('slide', {direction: 'left'}, 1000);
    });
</script>