jQuery效果

百奇

于 2018-11-07 18:46:14 发布

阅读量107

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_43264596/article/details/83829692

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery显示与隐藏
两个按钮来控制显示与隐藏

<p>Hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

 $("#hide").click(function(){
		//隐藏可以设置延迟时间 1000毫秒就是1秒
		$("p").hide(1000);
		});
	$("#show").click(function(){
		//隐藏可以设置延迟时间 1000毫秒就是1秒
		$("p").show(1000);
		});

一个按钮来控制显示与隐藏

<p>Hello</p>
<button id="toggle">隐藏/显示</button>

$("#toggle").click(function(){
//toggle也可以设置延迟时间
		$("p").toggle(1000);
		});

做一个更好看的操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<script>
for( var i=0;i<5;i++){
	$("<div>").appendTo(document.body);
	}
	$("div").click(function(){
		$(this).hide(2000);
		//直接移除 减少内存
		$(this).remove(this);
		});
</script>


</body>
</html>

/* style.css */
div{
	background-color:#C66;
	width:30px;
	height:50px;
	margin:2px;
	float:left;
	}

jQuery淡入淡出
fade
.fadeIn()
.fadeOut()
.fadeTo()
.fadeggle()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Fade.js"></script>
</head>

<body>
<button id="in">FadeIn</button>
<button id="out">FadeOut</button>
<button id="to">FadeTo</button>
<button id="toggle">FadeToggle</button>
<div id="div1" style="width:80px;height:80px;background-color:aqua;display:none"></div>
<div id="div2" style="width:80px;height:80px;background-color:#F36;display:none"></div>
<div id="div3" style="width:80px;height:80px;background-color:#F0F;display:none"></div>
</body>
</html>

// JavaScript Document
$(document).ready(function(e) {
    $("#in").on("click",function(){
		$("#div1").fadeIn(1000);
		$("#div2").fadeIn(1000);
		$("#div3").fadeIn(1000);
		});
	$("#out").on("click",function(){
		$("#div1").fadeOut(1000);
		$("#div2").fadeOut(1000);
		$("#div3").fadeOut(1000);
		});
	$("#toggle").on("click",function(){
		$("#div1").fadeToggle(1000);
		$("#div2").fadeToggle(1000);
		$("#div3").fadeToggle(1000);
		});
	$("#to").on("click",function(){
		//设置它的透明度 0 为完全透明的
		$("#div1").fadeTo(1000,0.5);
		$("#div2").fadeTo(1000,0.7);
		$("#div3").fadeTo(1000,0.3);
		});
});

在这里插入图片描述
3. jQuery滑动
slide
.slideDown()
.slideToggle()
.slideUp()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="move.js"></script>
<style>
#content,#flipshow,#fliphide{
	padding:5px;
	text-align:center;
	background-color:#F9C;
	border:#0CC solid 1px;
	}
#content{padding:50px;
display:none;}
</style>
</head>

<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="content"> Hello World</div>
</body>
</html>

// JavaScript Document
$(document).ready(function(e) {
    $("#flipshow").click(function(){
		$("#content").slideDown(1000);
		});
	 $("#fliphide").click(function(){
		$("#content").slideUp(1000);
		});
});

jQuery动画
jQuery animate() 方法用于创建自定义动画。
语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
注意：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$(document).ready(function(e) {
    $("#btn1").click(function(){
		$("#div1").animate({
			//把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止
			
			"left":"100px",
			"height":"150px",
			"opacity":"0.5",
			"width":"150px",
			})
		});
});

jQuery停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
6. jQuery Callback

$(document).ready(function(e) {
    $("button").click(function(){
		//在动画执行完毕以后调用这个函数
		//$("p").hide(1000,function(){
//			alert("动画执行完毕，这个方法被调用");
//			});
//点击button以后让P元素同时执行多个动画
$("p").css("color","red").slideUp(1000).slideDown(1000);
		});
});

jQuery Chaining
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
例如：

$("p").css("color","red").slideUp(1000).slideDown(1000);

百奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录