jQuery:如何在unover上中断悬停

Question

我想知道如何用unhover函数来中断悬停函数？

例如，我在网页上有一个圆圈（由css制作：border-radius=width的一半，其中width=height），悬停时，它开始将宽度和高度从200px增加到500px，边框半径也从100px增加到250px。。反之亦然。

但正如我所注意到的，即使我解开，动画也会一直完成到最后

如上所示的eg具有以下代码：

<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

如果将border-radius设置为50%，它将始终是一个圆
我为你创建了一个片段：

$(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>