Question

我想知道如何使用unhover功能中断悬停功能？

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

但是正如我所注意到的那样，即使我将其移除，动画也会一直完成

如上所示，例如具有以下代码：

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

jQuery：如何在unhover上中断悬停

1 个答案: