JQuery效果
JQuery效果
在jQuery中的基础分12种，有语法，选择器，对象，事件等等，当然包括效果，在这里就不一一列举了。我着重挑写一下jQuery效果
从图片我们可以看到，jQuery中的效果也分为很多。
注：图片来源授课老师授课时发的文件。
那么举个例子看看：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JQuery效果</title>
</head>
<body>
<div id="open_up" style="position:relative; left:110px;">
<h2>我出来了</h2>
</div>
<div>
<h2 id="open_up1" style="position:relative; left:110px;">我隐藏了 </h2>
</div>
<button id="show" style="width:100px;height:45px;">隐藏</button>
<button id="show1" style="width:100px;height:45px;">显示</button>
<button id="show2" style="width:100px;height:45px;">切换</button>
<br />
<br />
<button id="show3" style="width:100px;height:45px;">滑动显示</button>
<button id="show4" style="width:100px;height:45px;">滑动隐藏</button>
<button id="show5" style="width:100px;height:45px;">滑动切换</button>
<br />
<br />
<button id="show6" style="width:100px;height:45px;">淡入</button>
<button id="show7" style="width:100px;height:45px;">淡出</button>
<button id="show8" style="width:100px;height:45px;">淡入淡出切换</button>
<br />
<br />
<button id="show9" style="width:310px;height:45px;">调整透明度到 0.2 fadeTo</button>
<br />
<br />
<button id="show10" style="width:100px;height:45px;">自定义动画</button>
<button id="show11" style="width:100px;height:45px;">停止</button>
<button id="show12" style="width:100px;height:45px;">延缓 delay</button>
<script src="~/Content/js/jquery-1.12.4/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#show").click(function () {
//参数
//速度:(可选)可以是预设的("slow","normal",or"fast")表示动画时长的毫秒数
//easin换效果，默认是"swing",可用参数"linear"
//完成 g:(可选)指定切时执行函数(可选)
$("#open_up").hide(6000, 'linear', function () {
alert("已经隐藏");
});
$("#open_up1").hide(6000, 'linear', function () {
});
});
$("#show1").click(function () {
$("#open_up").show();
$("#open_up1").show();
});
$("#show2").click(function () {
$("#open_up").toggle();
$("#open_up1").toggle();
});
//滑动
$("#show3").click(function () {
$("#open_up").slideDown();
$("#open_up1").slideDown();
});
$("#show4").click(function () {
$("#open_up").slideUp();
$("#open_up1").slideUp();
});
$("#show5").click(function () {
$("#open_up").slideToggle();
$("#open_up1").slideToggle();
});
//淡入淡出
$("#show6").click(function () {
//只指定速度
//$("#open_up").fadeIn(2000）;
//指定速度和完成时执行函数
$("#open_up").fadeIn(2000, function () {
console.log("执行完成");
});
$("#open_up1").fadeIn(2000, function () {
});
});
$("#show7").click(function () {
$("#open_up").fadeOut(2000);
$("#open_up1").fadeOut(2000);
});
$("#show8").click(function () {
$("#open_up").fadeToggle(2000);
$("#open_up1").fadeToggle(2000);
});
//fadeTo
$("#show9").click(function () {
//参数:速度(可选)，目标透明度，easing(可选)，完成时执行函数(可选)
$("#open_up").fadeTo(3000, 0.2, function () {
console.log("执行完成");
});
$("#open_up1").fadeTo(3000, 0.2, function () {
console.log("执行完成");
});
});
//animate()
$("#show10").click(function () {
$("#open_up").animate({
"fontSize": "50px",
"left": "+50px",
"top": "+50px",
}, 100, function () {
alert("动画执行完");
});
$("#open_up1").animate({
"fontSize": "50px",
"left": "+50px",
"top": "+50px",
}, 100, function () {
alert("动画执行完");
});
});
$("#show11").click(function () {
$("#open_up").stop();
$("#open_up1").stop();
});
//delay 设置一个延时来推迟执行队列中之后的项目
$("#show12").click(function () {
$("#open_up").delay(1000).fadeOut(1000);
$("#open_up1").delay(1000).fadeOut(1000);
});
});
</script>
</body>
</html>
它实现的效果在这里我只列举一个，剩下的可以自己复制一下看看。如图，鼠标按了淡入淡出切换的按钮：
执行到这里的时候我移动鼠标按了停止的按钮，
再一次点击停止按钮之后继续执行完这次任务，然后两个div就隐藏了起来