26
复合事件与显示效果
source link: http://www.cnblogs.com/x-i-n/p/12080020.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
复合事件与显示效果
复合事件
hover(f1,f2):切换使用mouseover和mouseout()
toggle(f1,f2,f3,fn):版本问题(jquery1.9以前支持)
多个click()事件，toggle()还有其他含义（隐藏与显示)
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
显示效果
形式：hide([速度],[回调函数])；
其中速度：可以是数字（毫秒），也可以是单词（fast normal slow，注意加双引号）
hide():隐藏
show:显示
toggle:切换隐藏与显示
淡入淡出 （透明度）
fadeIn():淡入 显示
fadeout:淡出 隐藏
控制高度
slideDown():下拉，显示
slideUp():上拉 隐藏
总结显示问题：
显示：show() fadeIn() slideDown()
隐藏：hide() dadeout() slideUp()
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<h1 id="h1">我是h1</h1>
<h3>h3h3</h3>
<p id="color1">color1</p>
<p id=""></p>
<button onclick="myShow()">显示</button>
<button onclick="myHide()">隐藏</button>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$(document).ready(function(){
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
//hover:等效于mouseover与mouseout
//toggle循环单击事件click
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
//toggle:还具备隐藏于显示
/*hide:隐藏
show:显示
toggle:隐藏于显示*/
$("#color1").css({"color":"red","font-size":"100px","background-color":"gray"})
});
// 显示与隐藏：
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
//控制高度
/*slideDown:下拉 显示
slideUp:上拉 隐藏*/
//操作DOM
/* a.样式操作(设置css)
jquery对象.css("属性名","属性值");
jquery对象.css({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"});
*/
/*ii.追加或移除样式class
addClass("x");
addClass("x x x");
removeClass("x);
removeClass("x x x"");
removeClass();移除全部样式*/
</script>
</body>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK