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
}

Jquery的：

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

您需要停止鼠标在内圈上造成事件（因为您正在处理其父级上的鼠标事件，并且孩子正在窃取鼠标，导致父级鼠标停止事件）。

使用pointer-events: none;设置内圈的样式以停止任何互动。

JSFiddle：http://jsfiddle.net/a5Ljuqdn/3/

.round_content {
  pointer-events: none;

您还需要停止现有动画以避免使用stop()跳出：

JSFiddle：http://jsfiddle.net/a5Ljuqdn/5/

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

    $('.round_icon').mouseout(function () {
        var style2 = {
            width: '300px',
            height: '300px'
        }

        $(this).stop().animate(style2, 200).removeClass('round_icon2');
    });
};
$(document).ready(main);

更新。因为当您调整悬停的元素大小时，鼠标悬停时总会出现反弹问题，您需要屏蔽它以免受额外的鼠标事件的影响。此示例使用忙标志来停止鼠标悬停事件，直到收到鼠标离开：

JSFiddle：http://jsfiddle.net/a5Ljuqdn/8/

var main = function () {
    // Stop additional mouse over when already processing a mouseout
    var busy = false;
    $('.round_icon').mouseover(function () {
        if (!busy) {
            var style1 = {
                width: '200px',
                height: '200px'
            }
            $(this).stop().animate(style1, 200).addClass('round_icon2');
        }
    });

    $('.round_icon').mouseout(function () {
        var style2 = {
            width: '300px',
            height: '300px'
        }
        busy = true;
        $(this).stop().animate(style2, 200, function() {
            busy = false;
        }).removeClass('round_icon2');
    });
};

$(document).ready(main);

正如HerrSerker指出你最好使用mouseenter，但它与现有的其他解决方案没什么区别。无论如何，只有mouseenter才能看到http://jsfiddle.net/a5Ljuqdn/9/

要尝试避免此问题，您可以始终在圆圈（相同大小）后面放置透明包装以捕获事件。例如http://jsfiddle.net/a5Ljuqdn/11/这需要修复样式，但你明白了。我不会自己推荐它，因为鼠标交互看起来很奇怪（因为它与圆圈不匹配）。

Answer 2

试

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

Answer 3

jQuery mouseover和mouseout事件也将触发子元素。
请改为使用mouseenter和mouseleave事件

http://jsfiddle.net/a5Ljuqdn/7/

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

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

Jquery动画不能正常工作，表现得很奇怪

3 个答案:

DEMO