延时提示框

Posted 2350305682

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了延时提示框相关的知识,希望对你有一定的参考价值。

</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="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();点击的时候淡入,再点击的时候淡出,重复切换。


});

});

 

        

以上是关于延时提示框的主要内容,如果未能解决你的问题,请参考以下文章

js 延时提示框

JS延时提示框

WinForm | C# 弹出简易的消息提示框 (仿Android Toast消息提示)

怎么用js弹出提示框

Eclipse设置自动提示代码

QT中错误提示框