jquery - Why are the images flashing? -

on page http://128.199.58.229/landingpage/ each image coded like

<span class="tribeimg"> <img src="images/tribes/img.jpg"> <p class="lt-tribe-name">tribe name</p> </span> 

my css looks like

.tribeimg img { opacity: 0.7; position: absolute; left: 0; top: 0; }  .tribeimg .lt-tribe-name { opacity: 0.7; z-index: 11; color: white; position: absolute; left: 32px; bottom: 50px; text-shadow: 1px 1px 8px black; } 

i'm using jquery fadeto different opacity.

$(document).delegate('.tribeimg', 'mouseover', function() {     $(this).children('img').fadeto(333, 1);     $(this).children('.lt-tribe-name').fadeto(333, 1); });  $(document).delegate('.tribeimg', 'mouseout', function() {     $(this).children('img').fadeto(333, 0.7);     $(this).children('.lt-tribe-name').fadeto(333, 0.7); }); 

this kind of works. on mouseout images flash. try moving mouse around exaggerate flashing. not sure why? want single fade in , fade out.

how fix it?

thanks.

$(document).delegate('.tribeimg', 'mouseover', function() {     $(this).children('img').stop(true,true).fadeto(333, 1);     $(this).children('.lt-tribe-name').stop(true, true).fadeto(333, 1); });  $(document).delegate('.tribeimg', 'mouseout', function() {     $(this).children('img').stop(true, true).fadeto(333, 0.7);     $(this).children('.lt-tribe-name').stop(true, true).fadeto(333, 0.7); }); 

replace jquery code this... solve problem.