將圖標移動到被懸停或點擊的元素的絕對位置

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設計。