setTimeout, show and hide using jQuery -
i have large want display onload , have timeout display smaller image. onmouseover, using jquery slide in large image , on mouse slide out large image , slide in smaller image. here code have mouseover, mouseout function. need start large 1 displayed 5 seconds , slide smaller one.:
<script type="text/javascript"> $(document).ready(function () { $(".expanded").show(); $(".collapsed").hide(); $(".collapsed").mouseover(function () { $(".collapsed").slideup(500); $(this).next(".expanded").slidetoggle(500); }); $(".expanded").mouseleave(function () { $(".expanded").slideup(500); $(".collapsed").slidedown(500); }); }); </script>
i create global variable "readyforhovering" set false until timeout expires such as:
var readyforhovering = false; $(document).ready(function () { settimeout(function() { //code hide large image , show smaller image goes here //now enable hovering... readyforhovering = true; }, 5000); $(".expanded").show(); $(".collapsed").hide(); //toggle componenet class msg_body $(".collapsed").mouseover(function () { if (readyforhovering) { $(".collapsed").slideup(500); $(this).next(".expanded").slidetoggle(500); } }); $(".expanded").mouseleave(function () { if (readyforhovering) { $(".expanded").slideup(500); $(".collapsed").slidedown(500); } }); });
you don't want user able hover until after 5 seconds has expired , have shown smaller image... that's point of readyforhovering variable.