javascript - JAVASCRIPT / JQuery onmouveoverを1回実行する方法

Question

マウスがli要素の上にあるときにポップアップを表示しようとしています。

ポップアップにアニメーションが表示されました (フェードで表示され、表示され、次に表示されます)

問題は、マウスがliの上にある間、ポップアップのアニメーションが無限ループになっているように見えることです。

私は多くのli要素を取得し、それらに自動IDを付与するプロセスを作成し、それらを「for」ループに渡しました。

私のコードIMPORTANT EDIT SORRY

echo"<li id='".$li_id_name.$li_id."' onmouseover='showpopup(this)'>";

    echo"<div id='".$li_id_name.$li_id."detail'>SOME TEXT</div>";

echo"</li>";

Javascript / jQuery

function showpopup(obj) {

 d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('opacity','1').each('end', function() {
        d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('margin-top','-300px').each('end', function() {
            d3.select('#'+$(obj).attr('id')+"detail").transition().duration(500).style('margin-top','-250px');
        });
    });

}

申し訳ありませんが、コードで間違いを犯しました。実際、ポップアップはli要素内のdivです