Web developers sometimes use user interaction events that delay operations. For example, the product of the home page of Poly Mei Excellent products, when the mouse moved into the product 1 seconds later, will show the product details, and do not want the user's mouse pointer just moved into the element to show the details, for users who do not want to display details, To achieve a friendly interaction, the following is the use of jquery timer settimeout, the specific code is as follows:
Example 1.jQuery to realize the effect of mouse sliding over-time delay display
HTML code
| The code is as follows |
Copy Code |
|
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery realize the effect of mouse sliding over-time display </title>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
$ (function () {
$ ('. Post '). MouseOver (function () {
Hidetimer=settimeout ("$ ('. Post >. demo '). Show ();", 1000)//mouse over element 1 seconds display child element
}). MouseLeave (function () {
Cleartimeout (Hidetimer);//Clear Timer
Hidetimer=settimeout ("$ ('. Post >. demo '). Hide ();", 10);//mouse remove element area child 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>
<body>
<div class= "box" >
<div class= "POST" > Mouse stay here for 1 seconds there's a surprise! <div class= "Demo" > Congratulations on seeing a warm color. </div></div>
</div>
</body>
|
To remove the element immediately after the mouse is moved, the child element is also displayed, and you need to use Cleartimeout (Hidetimer) to clear the timer, which will effectively prevent the problem from occurring
Example 2,tab tab mouse passes with delay effect
If you want to implement the mouse over the div n seconds before performing some functions, or similar to the following tab switch without passing between the display, the following method can be implemented.
| The code is as follows |
Copy Code |
| <!doctype html>
<meta charset= "Utf-8" >
<title>hovertab has delayed display effect </title>
<style type= "Text/css" >
*{padding:0; margin:0; list-style:none;font-size:12px;}
. mytab {background: #007373; width:600px; margin-top:100px; margin-right:auto; margin-left:auto; height:230px;}
. mytab. title Li {float:left; width:100px height:30px; line-height:30px; text-align:center; background: #099; Borde r:1px solid #FFF; margin-left:14px; margin-top:14px; }
. mytab. Content Li {line-height:200px; text-align:center; height:200px; width:600px; clear:both;}
. mytab. Title Li.cur {color: #000; background: #FFF; font-weight:bold; border:1px solid #000;}
A {color: #FFF}
. mytab. Title Li.cur a{color: #000;}
</style>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type= "Text/javascript" ></ Script>
<script>
$ (function () {
var T_li = $ (". Mytab. Title Li")
var C_li = $ (". Mytab. Content Li")
T_li.hover (function () {
var i = T_li.index ($ (this));
function Way () {//www.iiwnet.com
T_li.removeclass ("cur"). EQ (i). addclass ("cur");
C_li.hide (). EQ (i)-Show ();
}
Timer=settimeout (way,500);
},function () {
Cleartimeout (timer);
});
});
</script>
<body>
<div class= "Mytab" >
<ul class= "title" >
<li class= "cur" ><a href= "/php/" target= "_blank" >php tutorials </a></li>
<li><a href= "/" target= "_blank" >js special effects </a></li>
<li><a href= "/" target= "_blank" >css layout </a></li>
<li><a href= "/js_tab/" target= "_blank" >tab tab </a></li>
<li><a href= "/js_pic/" target= "_blank" > Slide </a></li>
</ul>
<ul class= "Content" >
<li> content 1</li>
<li style= "Display:none;" > Content Content 2</li>
<li style= "Display:none;" > Content Content Content 3</li>
<li style= "Display:none;" > Content Content Content 4</li>
<li style= "Display:none;" > Content Content Content content 5</li>
</ul>
</div>
</body>
|
