码迷,mamicode.com
首页 > 其他好文 > 详细

延时提示框

时间:2016-10-27 12:35:49      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:重复   函数   color   isp   ogg   splay   绑定   gre   script   

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


});

});

 

        

延时提示框

标签:重复   函数   color   isp   ogg   splay   绑定   gre   script   

原文地址:http://www.cnblogs.com/annie211/p/6003292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!