title: jQuery mouseenter() and mouseleave() functions work repeatedly
body: <p>I have a picture and a div. The div is hidden(display:none;). I want to show the div when mouse is over the picture and hide the div again when mouse is not over the picture. I use mouseenter() and mouseleave() events to do this but when moue is over the picture, both of the functions work repeatedly. Here is the code that I define functions:`</p>
  
  <pre><code>$("#pic").mouseenter(function(){
    $("#checkin").slideDown();
  });
  $("#pic").mouseleave(function(){
    $("#checkin").slideUp();
  });
  </code></pre>
  
  <p>I also tried the hover method but the result is the same.</p>
  
  <pre><code>$("#pic").hover(
    function(){
      $("#checkin").slideDown(200);
    },
    function(){
      $("#checkin").slideUp(200);
    }
  );
  </code></pre>
  
  <p>What is the problem, I can't understand.</p>
  
  <p><strong>Update:</strong>
  Here is the HTML code</p>
  
  <pre><code>&lt;tr&gt;&lt;td valign='top' class='checkinpic'&gt;&lt;img src='img.png' id='pic' height='100%'&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div id='checkin'&gt;
  You are not going to any activity this week.
  &lt;/div&gt;
  </code></pre>