jQuery : 이동 취소시 호버를 방해하는 방법

Question

이동 취소 기능을 사용하여 호버 기능을 방해하는 방법에 대해 궁금합니다.

예 : 웹 페이지에서 원 (CSS의 : border-radius = 너비의 절반, 너비 = 높이)을 가져 오면 그 너비와 높이가 200px에서 500px로 증가하기 시작합니다. 또한 100px에서 250px까지의 경계 반경과 이동시의 반전 값을 비교합니다.

하지만 난 통지로, 애니메이션은 내가

위의 증명 다음 코드가 같이 예를 unhover 경우에도 마지막까지 완료 : 당신이 border-radius50%로 설정하면

<script> 
    $("#circle").hover(function() { 
       $(this).animate({height:"500px" , width:"500px" , borderRadius:"250px"},1500); 
         }, 
     function unAnimate() { 
       $(this).animate({height:"200px" , width:"200px" , borderRadius:"100px"},750); 
     } 
); 


</script> 

Answer 1

그것을 항상 원이 될 것입니다. .

$(document).ready(function(){ 
 
    $('#circle').hover(function(){ 
 
    $(this).stop().animate({width: 300, height: 300}, 1500); 
 
    }, function(){ 
 
    $(this).stop().animate({width: 100, height: 100}, 750); 
 
    }); 
 
});

#circle{ 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 

 
} 
 

 
.nice-gradient{ 
 
    background: rgb(254,204,177); 
 
background: -moz-radial-gradient(center, ellipse cover, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); 
 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); 
 
background: -webkit-radial-gradient(center, ellipse cover, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); 
 
background: -o-radial-gradient(center, ellipse cover, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); 
 
background: -ms-radial-gradient(center, ellipse cover, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); 
 
background: radial-gradient(ellipse at center, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="circle" class="nice-gradient"></div>