アイコンを移動またはクリックした要素の絶対位置に移動

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デザインまでです。