javascript - 将图标移动到悬停或单击的元素的绝对位置

Question

$('.class1').on('mouseenter', function () {

var top_offset = $(this).position().top;
var left_offset = $(this).position().left;

  $('.icon').prependTo($(this)).css({
     position: "absolute",
     top: top_offset,
     left: left_offset
  });
});

在鼠标输入或悬停时，我获得该元素的位置，并且我有一个图标，我想将其移动到该位置，但我想用动画来实现，以便用户看到它。我该怎么做？

Answer 1

$('.class1').on('mouseenter', function () {

var top_offset = $(this).position().top;
var left_offset = $(this).position().left;
var class1 = this

$('#icon').css('position', 'relative').animate({

    top: top_offset,
    left: left_offset
}, 1000, function () { $(this).prependTo($(class1)) });

});

你必须使用 jQuery 动画。这很简单。只需设置您的持续时间和执行结束时您想要的内容即可。 CSS 取决于您以及您的 html 设计。