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