Question

这是我的HTML：

<div id = "firstlevel">
    test 
</div>
<div id = "tooltip">
      Tooltip
</div>

以及以下jQuery：

$("#firstlevel").hover(function(){
    $("#tooltip").animate({ opacity: 1, top: '-=10px' }, 100);
},
function(){
    $("#tooltip").stop().animate({ opacity: 0, top: '+=10px' }, 100);
});

小提琴在这里：https://jsfiddle.net/6gpyhotx/1/

目前，当您在父母之间来回快速地来回移动时，工具提示最终会开始改变其位置。

当我删除.stop()方法时，它运行良好且保持在同一位置，但我们不希望它一直重复。

我只需要工具提示停留在同一个地方，而不是在多次悬停后移动更低或更高。

由于

Answer 1

首选带有类的CSS3动画。它工作得更好，硬件加速。在悬停时向工具提示添加一个类，在将鼠标悬停时将其删除。完成工作！

＆＃13;

$("#firstlevel").hover(function(){
    $("#tooltip").addClass('shift');
},
function(){
    $("#tooltip").removeClass('shift');
});

＆＃13;

#tooltip{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: lightgreen;
  padding: 20px;
  display: inline-block;
}

#tooltip.shift{
  transform : translateY(20px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstlevel">Hover me</div>

<div id="tooltip">I'm the tooltip</div>

＆＃13;

jQuery Animate top - 动画元素不会保持相同的位置

1 个答案: