Question

我有一个元素在悬停时动画，但是当它似乎移动到位置时，当你盘旋时，特别容易注意几次。我认为它可能与stop（）函数有关，因为我不熟悉它。

查看

HTML

<ul><li id="home_sensors_li_temp"><h4>Temperature</h4><div class="sensor_border"></div><div class="sensors_icon"></div></li></ul>

JQUERY

$('.sensor_border').mouseenter(function(){
    $(this).stop().animate({
        'height':'130px',
        'width':'130px',
        'margin-left':'13px',
        'margin-top':'15px'
    })
});
$('.sensor_border').mouseleave(function(){
    $(this).stop().animate({
        'height':'120px',
        'width':'120px',
        'margin-left':'18px',
        'margin-top':'20px'
    })
});

CSS

body {background:blue}
.sensor_border {border:4px solid #fff; border-radius:50%; height:110px; margin:20px 18px; position:absolute; width:110px;}
.sensors_icon {height:120px; width:120px;}

为什么这个元素会失去位置，我做错了什么？

Answer 1

this是否适合您？

如果我理解正确，javax.servlet.ServletException是您注意到的创建推送的人。但是如果你将边距保持为常数，请将圆上的margins设置为自己的中心，然后仅设置圆的translate和width的动画，我认为它会产生很多更好的结果。

<强> 段：

height

$('.sensor_border').mouseenter(function () {
    $(this).stop(true).animate({
        height: 130,
        width: 130
    },{duration:400,easing:'swing'});
});
$('.sensor_border').mouseleave(function () {
    $(this).stop(true).animate({
        height: 120,
        width: 120
    },{duration:400,easing:'swing'});
});

body {
    background:blue
}
.sensor_border {
    transform:translate(-50%,-50%);
    border:4px solid #fff;
    border-radius:50%;
    height:110px;
    margin:75px 73px;
    position:absolute;
    width:110px;
}
.sensors_icon {
    height:120px;
    width:120px;
}

您怎么看？

元素移动到动画的位置

1 个答案: