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

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 animate。这很简单。只需设置持续时间以及执行结束时的内容即可。 CSS取决于你，直到你的html设计。