您的位置：首页 > Web前端 > JQuery

jQuery效果总结

2015-08-18 11:12 691 查看
摘要: jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery stop() jQuery Callback jQuery Chaining

1、

.html.js
<div class="aa"></div>$(".aa").
<div id="aa"></div>$("#aa").
jQuery 隐藏/显示.hide() .show() .toggle()
jQuery 淡入淡出 .fadeIn() .fadeOut() .fadeToggle()
jQuery 滑动 .slideDown().slideUp() .slideToggle()
jQuery 动画
多个属性.animate({left:'250',opacity:'0.5',height:'150px'});
相对.animate({left:'250px',height:'+=150px'});
使用预定义.animate({height:'toggle'});
队列功能.animate({height:'300px',opacity:'0.4'},"slow");
.animate({weight:'300px',opacity:'0.8'},"slow");
.animate({height:'100px',opacity:'0.4'},"slow");
.animate({weight:'100px',opacity:'0.8'},"slow");
jQuery stop() .stop
jQuery Callback$("p").hide(1000,function(){alert("The paragraph is now hidden");});
jQuery Chaining$("#p1").css("color","red").slideUp(2000).slideDown(2000);
.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<link rel=stylesheet href="app.css" type="text/css">
</head>

<body>
<h1>Hello</h1>
<p>Hello</p>
<a>Hello</a>
<p>Hello</p>
<button id="show" type="button">显示</button>
<button id="hidden" type="button">隐藏</button>
<button id="toggle" type="button">切换</button><br>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<button id="fadeIn" type="button">点这里，三个正方形可以渐入</button>
<button id="fadeOut" type="button">点这里，三个正方形可以渐出</button>
<button id="fadeToggle" type="button">点这里，三个正方形渐入渐出切换</button>
<button id="fadeTo" type="button">渐出至一定的透明度</button><br/>
<div class="div4">
好好学习，<br>
天天向上。<br>
</div>
<p class="div5">
点击这里，div4滑出。
</p>
<p class="div6">
点击这里，div4滑入。
</p>
<p class="div7">
点击这里，div4滑出滑入。
</p>
<button id="animate1" type="button">开始动画</button><br><br>
<div class="div8" style="background:#98bf21;height:80px;width:500px;position:relative;">
默认地，所有 HTML 元素都有一个静态位置，且无法移动。<br>
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！<br>
</div>

<button id="animate2" type="button">animate操作多个动画属性</button><br><br>
<button id="animate3" type="button">animate相对动画属性</button><br><br>
<button id="animate4" type="button">animate使用预定义的值</button><br><br>
<button id="animate5" type="button">animate队列功能</button><br><br>
<br><br><br><br><br><br>
<button id="animate6" type="button">animate队列功能   增加文字的字号</button><br><br>
<div class="div9" style="background:#98bf21;height:100px;width:200px;position:absolute;">
jQuery
</div>
<br><br><br><br><br><br><br>
<button id="stop" type="button">停止滑动</button>
<div class="div10">
div10        点这里，向下滑动
</div>
<div class="div11">
div11      hello world!
</div>
<button id="callback" type="button">callback</button>
<div class="div12">
div12      callback
</div>

<div class="div13">
div13      chaining
</div>
<button id="chaining" type="button">chaining</button>

</body>
</html>


.js 后面一个是 .css

$(document).ready(function(){

alert("文档加载完毕");

//	$("button").click(function(){
//		$("p").css("background-color","red");
//		$("a").hide();
//	});

$("#hidden").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(2000);
});
$("#toggle").click(function(){
$("p").toggle(3000);
});
$("#fadeIn").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(2000);
$("#div3").fadeIn(5000);
});
$("#fadeOut").click(function(){
$("#div1").fadeOut(5000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut();
});
$("#fadeToggle").click(function(){
$("#div1").fadeToggle(5000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle();
});
$("#fadeTo").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
$(".div5").click(function(){
$(".div4").slideUp("slow");
});
$(".div6").click(function(){
$(".div4").slideDown("slow");
});
$(".div7").click(function(){
$(".div4").slideToggle();
});
$("#animate1").click(function(){
$(".div8").animate({left:'600px'});
});
$("#animate2").click(function(){
$(".div8").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px',
});
});
$("#animate3").click(function(){
$(".div8").animate({
left:'250px',
height:'+=150px',
width:'+=150px',
});
});
$("#animate4").click(function(){
$(".div8").animate({
height:'toggle'
});
});
$("#animate5").click(function(){
$(".div8").animate({height:'300px',opacity:'0.4'},"slow");
$(".div8").animate({width:'1000px',opacity:'0.8'},"slow");
$(".div8").animate({height:'100px',opacity:'0.4'},"slow");
$(".div8").animate({width:'500px',opacity:'0.8'},"slow");
});
$("#animate6").click(function(){
$(".div9").animate({left:'200px'},"slow");
$(".div9").animate({fontSize:'3em'},"slow");
});
$(".div10").click(function(){
$(".div11").slideToggle(10000);
});
$("#stop").click(function(){
$(".div11").stop();
});
$("#callback").click(function(){
$(".div12").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
$("#chaining").click(function(){
$(".div13").css("color","red").slideUp(2000).slideDown(2000);
});
$(selector).click(function(){
$(this).hide();

});//	触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function(){

});	//触发或将函数绑定到被选元素的双击事件

$(selector).focus(function(){

});	//触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function(){

});	//触发或将函数绑定到被选元素的鼠标悬停事件
});//	将函数绑定到文档的就绪事件（当文档完成加载时）


div.div4,p.div5,p.div6,p.div7,div.div10,div.div12{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.div4{
height:120px;
}
div.div11{
padding:50px;
background:#e5eecc;
border:solid 1px #c3c3c3;
display:none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航