首页 > 代码库 > 延时提示框
延时提示框
</script><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>延时提示框</title>
<style>
#div1{width:300px;height:30px;background:red;}
#div2{width:200px;height:30px;background:green;margin:20px;display:none;}
</style>
<script src="http://www.mamicode.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$("#div2").fadeIn(1000); //当鼠标在div1上的时候，div2在1秒内淡入
},function(){
$("#div2").fadeOut(1000); //当鼠标离开div1的时候，div2在1秒内淡出
});
})
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
补充：1、$("div").hover(function(){},function(){}); 表示鼠标在div上悬停和离开时分别做的事
2、 $("div").show();从左上角开始显示 $("div").hide();隐藏
3、 $("div").slideUp();卷起 $("div").slideDown();展开
4、 $("div").fadeIn();淡入 $("div").fadeOut();淡出 $("div").fadeTo(1000,0.5);1秒内变成半透明
5、.toggle() //toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。1.9以上版本已废除
$(function(){
/*$("#div1").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);*/
该方法也可用于切换被选元素的 hide() 与 show() 方法。
$("#div1").click(function(){
$("#div2").toggle();点击的时候出现，再点击的时候隐藏，重复切换。
$("#div2").fadeToggle();点击的时候淡入，再点击的时候淡出，重复切换。
});
});
延时提示框