将图标移动到被悬停或点击的元素的绝对位置
问题描述:
$('.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
});
});
在鼠标输入或悬停时,我得到该元素的位置,并且我有一个图标,我想将它移动到该位置,但是我想用动画做到这一点,以便用户看到它。我该怎么做?将图标移动到被悬停或点击的元素的绝对位置
答
$('.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设计。
'.icon' initialy的位置是什么。尝试在'.icon'元素上使用'.animate()'函数。点击此处查看更多(http://api.jquery.com/animate/)。 –
职位将存储在“var top_offset”和“left_offset” –
这是动画结束时的最后一个位置或位置吗? –