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