JQuery implements the effect of mouse sliding delay display

web front end nineteen thousand four hundred and sixty-four 12 years ago (2013-09-23)

Web developers sometimes use delayed user interaction events, such as the product display on the home page of JumeiYoupin website. When the mouse moves into the product for one second, the product details will be displayed, instead of the user's mouse pointer just moving into the element to display the details. For users who do not want to display details, it achieves friendly interaction. The following will be used The specific code of jQuery's timer setTimeout is as follows:

HTML code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" https://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery implements the effect of mouse sliding delay display- Tuoyuan Network </title> <script type="text/javascript" src=" https://code.jquery.com/jquery-1.4.2.min.js "></script> <script type="text/javascript"> $(function(){ $('.post').mou SEO ver(function(){ hideTimer=setTimeout("$('.post > .demo').show();", 1000); //Mouse over the element for 1 second to display child elements }).mouseleave(function(){ clearTimeout(hideTimer); //Clear Timer hideTimer=setTimeout("$('.post > .demo').hide();", 10); //Mouse removal element area Sub element disappears }); }); </script> <style type="text/css"> <!-- * { margin:0; padding:0; } body { margin:0; padding:0; } div { font-size:26px; color:#fff; text-align:center; line-height:200px; } .box { width:980px; margin:0 auto; background:#eee; } .post { width:600px; height:200px; background:#36C; position:relative; } .demo { width:380px; height:200px; position:absolute; top:0; right:-380px; background:#F90; display:none; } --> </style> </head> <body> <div class="box"> <div class="post">There is a surprise when you hover over here for one second! <div class="demo">Congratulations on seeing a warm color. </div></div> </div> </body> </html>

In order to prevent the mouse from moving in and out of this element and displaying child elements as well, clearTimeout (hideTimer) needs to be used to clear the timer, which can effectively prevent this problem from occurring.