css - jquery hover fadein only works for a short moment! why? -
i wrote below codes. such when mouse hover imgforplaces_thumbnail. div checkbutton display , overlay on div testtest. however, div checkbutton appear 1-2 sec, , disappear. if remove position:absolute; in css in div testtest, div checkbutton appear below of it.
can tell me why works 1-2 sec?
i have 2 divs, .testtest , .checkbutton, wrapped .imgforplaces_thumbnail1.
these divs:
echo '<div class=imgforplaces_thumbnail1 id=imgforplaces_thumbnail>'; echo '<div class=testtest>'; echo "<a class='ajax' href='image_color_box.php?id=".$row['id']."' title='homer defined'>"; echo "<img src='../imgforplaces_thumbnail/" . $row['location_name'] . ".png' />"; echo '</a>'; echo '</div>'; echo '<div class=checkbutton><img src="../images/fbloginbutton.png" /></div>'; echo '</div>'; the css follows:
#imgforplaces_thumbnail { border: 10px solid #eeeeee; float: left; margin: 20px; outline: 1px solid #cfcfcf; width: 300px; height: 225px; } .checkbutton { height: 40px; width: 209px; z-index: 2000; margin: 0 auto; } .testtest { position: absolute; } the jquery hover function:
$(document).ready(function(){ $(".checkbutton").hide(); $(".imgforplaces_thumbnail1").hover(function(){ $(".checkbutton", this).fadein("slow"); }, function(){ $(".checkbutton", this).fadeout("slow"); }); });
you can try set specific time span value fade-in , fade-out instead of using hard coded slow , fast attributes this
$(document).ready(function(){ $(".checkbutton").hide(); $(".imgforplaces_thumbnail1").hover(function(){ $(".checkbutton", this).fadein(200,function(){ //you can here $("#yourimage").show(); }); }, function(){ $(".checkbutton", this).fadeout(200,function(){ $("#yourimage").show(); }); }); }); for more info refer the documentation
Comments
Post a Comment