Jquery 动画无法正常工作，行为怪异

Question

我是 jquery 的新手。我刚刚使用 .animate 属性创建了一个基本动画。但是动画表现得很奇怪。这是一个悬停动画。如果我将鼠标悬停在某个部分中，它会变小并具有动画效果。但是，如果我将圆圈从顶部悬停，它就会工作。如果我将鼠标悬停在底部，它就不起作用。

这是我用过的代码

HTML:

 <div class="round_icon">
               <div class="round_content"> <i class="fa fa-gift"></i>
                 <p>GIFT</p></div>


  </div>

CSS:

.round_icon
{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 5px solid #fff;
    border-radius: 100%;
    height: 300px;
    margin: 30% auto 0;
    position: relative;
    width: 300px;
    color: #fff;
}
.round_icon p
{
    margin: 0 auto;
    text-align: center;
    display: block
}
.round_icon i
{
    margin: 0 auto;
    text-align: center;
    display: block
}
.round_content
{
    font-family: arial;
    font-size: 35px;
    left: 25%;
    margin: 0 auto;
    position: absolute;
    top: 35%;
    width: 50%;
}
.round_icon2
{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 5px solid #2A939C;
    border-radius: 100%;
    height: 300px;
    margin: 30% auto 0;
    position: relative;
    width: 300px;
    color: #2A939C !important
}

J查询:

var main = function(){
    $('.round_icon').mouseover( function(){

        var style1 = {width:'200px', height: '200px'}
        $(this).animate(style1,200).addClass('round_icon2');

        });

$('.round_icon').mouseout( function(){

        var style2 = { width:'300px', height: '300px'}

        $(this).animate(style2,200).removeClass('round_icon2');

        }); 

    };


$(document).ready(main);

Answer 1

尝试

var main = function () {

    $('.round_icon').mouseover(function () {


        var style1 = {
            width: '200px',
            height: '200px'
        }
        var elm = $(this);
        $(this).stop().animate(style1, 200)
        $('.round_icon').promise().done(function () {
            elm.addClass('round_icon2');

        });

    });

    $('.round_icon').mouseout(function () {


        var style2 = {
            width: '300px',
            height: '300px'
        }
        var elm = $(this);
        $(this).stop().animate(style2, 200).removeClass('round_icon2');
        $('.round_icon').promise().done(function () {
            elm.removeClass('round_icon2');
        });

    });

};


$(document).ready(main);

DEMO