JAVASCRIPT / JQuery How execute onmouveover 1 time -

im trying show popup when mouse on li element.

my popup got animation (get visible fading, comes up, comes down)

the problem popup's animation seems in endless loops while mouse on li.

i got alot's of li element , made process give them automatics id, passing them in 'for' loop.

my code 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');         });     });  } 

sorry did mistake in code, in fact, popup div inside li element

try this

html :

<ul>     <li class="assignenter">li1</li>     <li class="assignenter">li2</li>     <li class="assignenter">li3</li> </ul> 

css :

.assignenter{     display:block;     padding:20px;     background:green;     color:#fff; } 

jquery/js

$("li.assignenter").on( "mouseenter", function() {   $(this).css({      "background-color": "red",       "font-weight": "bolder"   }); }).on( "mouseleave", function() {        var styles = {                       backgroundcolor : "green",                        fontweight: ""                      };  $(this).css( styles );  }); 

hope solve problem