jquery - 使用 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 示例

由于您只将一个函数传递给悬停，因此它会在鼠标进入或离开元素时执行。

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