Using jquery how can I show an element on hover and hide on click

Question

I am trying to do some thing I'd like to think is simple.

animate a partially hidden element on hover, then when i click it, close it.

$('#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();

            });

the fiddle has the code I am using as well as the elements.

any ideas?

j08691 · Accepted Answer · 2013-05-31 03:20:14Z

1

Change .hover() to .mouseenter()

jsFiddle example

Since you're only passing a single function to hover, it gets executed when the mouse enters OR leaves the element.

$(document).ready(function () {
    $('#call-to-action').mouseenter(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();
    });
});

answered May 31, 2013 at 3:20

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jquery how can I show an element on hover and hide on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related