Scan WeChat official account
Surprise to share with you

JQuery implements the effect of mouse sliding delay display

web front end fourteen thousand nine hundred and twenty-five 10 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, Next, we will use jQuery's timer setTimeout. The specific code 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.

Share with friends: