javascript - jQuery fadeIn/Out stuttering with rounded div -

i have circular div contains image. on hover of image i'd opacity change black , display overlapping div containing information. far i'm able hover when users mouse crosses 200px x 200px div boundary, fadein fires - isn't bad thing. when user moves mouse within circle, fires again. ideas?

html:

<div class="prodava" onmouseover="jquery('#fader-123').fadein('fast');" onmouseout="jquery('#fader-123').fadeout('fast');">                          <a href="www.google.com/asd" class="product_item_link">         <img src="theimage.jpg" />         <div id="fader-123" class="prodavahl" style="display: none;">             <span>hello</span>         </div>     </a> </div> 

css:

.prodava {     position: relative;     border: 1px solid white;     border-radius: 1px;     display: block;     height: 200px;     width: 200px;     margin:10px; }  .prodava img {     border: 1px solid rgba(0, 0, 0, 0.2);     border-radius: 101px; /* must width + border */     width: 200px;     height: 200px;     box-shadow: 1px 1px 1px rgba(0,0,0, 0.7); }  .prodavahl {     color: #ffffff;     border: 1px solid rgba(0, 0, 0, 0.2);     background-color: black;     opacity: 0.8;     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     z-index: 10;     border-radius: 101px; /* must width + border */     box-shadow: 1px 1px 1px rgba(0,0,0, 0.7);     text-align: center; }  .prodavahl span {     padding-top: 20px; } 

try live demo

<div class="prodava">                          <a href="www.google.com/asd" class="product_item_link">         <img src="theimage.jpg" />         <div id="fader-123" class="prodavahl" style="display: none;">             <span>hello</span>         </div>     </a> </div> 

jquery(function( $ ){      $('.prodava').hover(function( e ){       $(this).find('.prodavahl').stop()[e.type=='mouseenter'?'fadein':'fadeout'](200);     });  }); 

the code above same as:

jquery(function( $ ){      $('.prodava').mouseenter(function(){       $(this).find('.prodavahl').stop().fadein(200);     }, mouseleave(function(){       $(this).find('.prodavahl').stop().fadeout(200);     });  }); 

which simplified

jquery(function( $ ){      $('.prodava').hover(function( e ){       if(e.type=='mouseenter'){           $(this).find('.prodavahl').stop().fadein(200);       }else{           $(this).find('.prodavahl').stop().fadeout(200);       }     });  }); 

and minified top example use of ternary operator (?:)