CODEWITHSUNDEEP
jquery
TJ Sherrill
TJ Sherrill

Reputation: 2645

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

jsFiddle

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?

Upvotes: 0

Views: 197

Answers (1)

j08691
j08691

Reputation: 207891

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();
    });
});

Upvotes: 1

Related Questions