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

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设计。