jquery .hover 다음 .click을 클릭하면 문제가 생깁니다.

Question

업데이트 : 코드를 통합하고 if/else 문을 추가하려고했습니다. 난 아직도 클릭에 얻는 방법 mouseenter /하는 MouseLeave 기능

$('#storybtn').on({ 
mouseenter:function(){ 
    $('#story') 
     .stop() 
     .animate({top:'405px'},'slow'); 
}, 
mouseleave:function(){ 
    $('#story') 
     .stop() 
     .animate({top:'435px'},'slow'); 
}, 
click:function(){ 
    var position = $('#story').css('top'); 
    if (position>'10px'){ 
    $('#story') 
     .stop() 
     .animate({top:'10px'},'slow'); 
     } 
    else (position='10px'){ 
    $('#story') 
     .stop() 
     .animate({top:'435px'},'slow'); 
     } 
    } 
}); 

Answer 1

나는 당신을 위해 예를 들어 바이올린을 만들었습니다 클릭이를 확인하기 위해/다른 경우 경우 나는 #story과에 클래스를 클릭 추가 무슨 일이 생긴 후

Example Fiddle

가하는 MouseLeave 애니메이션을 방지하기 위해 그것을 제거하거나 mouseleave 후 제거하십시오.

$('#storybtn').on({ 
     mouseenter: function() { 
      $('#story') 
       .stop() 
       .animate({top: '405px'}, 'slow'); 
     }, 
     mouseleave: function() { 
      if (!$('#story').hasClass('clicked')) { 
      $('#story') 
       .stop() 
       .animate({top: '435px'}, 'slow'); 
      } else { 
       $('#story').removeClass('clicked') 
      } 
     }, 
     click: function() { 
      var position = $('#story').css('top'); 
      if (position > '10px') { 
       $('#story') 
        .addClass('clicked') 
        .stop() 
        .animate({top: '10px'}, 'slow'); 
      } else if (position === '10px') { 
       $('#story') 
        .addClass('clicked') 
        .stop() 
        .animate({top: '435px'}, 'slow'); 
      } 
     } 
    }); 

Answer 2

먼저 무시 파악하지 않은, .hover()에 대한 구문은 jQuery를 최신 버전으로 사용되지 않습니다. 둘째, 새 애니메이션을 활성화하기 전에 다른 애니메이션을 중지해야합니다. 그렇지 않으면 이전 애니메이션이 끝날 때까지 대기열에 넣습니다. 이 시도 :

이

$('#storybtn').on({ 
    mouseenter:function(){ 
     $('#story') 
      .stop() 
      .animate({top:'405px'},'slow'); 
    }, 
    mouseleave:function(){ 
     $('#story') 
      .stop() 
      .animate({top:'435px'},'slow'); 
    }, 
    click:function(){ 
     $('#story') 
      .stop() 
      .animate({top:'10px'},'slow'); 
    } 
}); 

이 .click() 및 .hover()이 속기 무엇 인 .on() 핸들러를 사용합니다. 진짜를 사용하면 코드를 통합 할 수 있습니다.