使用jquery如何在悬停时显示元素并在点击时隐藏

Question

jsFiddle

我想做一些我想认为很简单的事情。

在悬停时为部分隐藏的元素设置动画，然后当我单击它时，将其关闭。

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

            });

小提琴有我正在使用的代码以及元素。

任何想法？

Answer 1

将.hover()更改为.mouseenter()

<强> jsFiddle example

由于你只是将一个函数传递给悬停，当鼠标进入或离开元素时它会被执行。

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