<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src = jquery-1.11.1.js></script>
<script>
//------------------------------动画之显示和隐藏--------------------------------------//
$(function(){
//点击按钮后显示动画
$("button:eq(0)").click(function(){
//显示动画用法1:show();括号里面不加参数 是没有缓动效果的
$("div").show();//底层是通过这个方法实现的:display:none;
//显示动画用法2: show(600);括号里面写的是毫秒值;
$("div").show(2000);//通过控制 宽高透明度和 display;
//显示动画方法3:show(字符串);slow慢:600ms;normal正常:400ms
$("div").show("slow");//慢
$("div").show("fast");//快
$("div").show("normal");//正常
})
});
//------------------------------动画的滑入----------------------------------------//
$("button").eq(1).click(function(){
//滑入动画用法1:slideDown()不加参数
$("div").slideDown();
//滑入动画用法2:slideDown(2000)毫秒值
$("div").slideDown(2000); //同过控制高和display
//滑入动画用法3: slideDown(字符串);slow:慢(600ms);normal:正常(400ms);fast:快200ms
$("div").slideDown("slow");
$("div").slideDown("normal");
$("div").slideDown("fast");
//滑入动画用法4:slideDown(毫秒值,回调函数[动画执行完毕,执行这个函数])
$("div").slideDown(2000,function(){
alert("动画执行完毕!");
})
//---------------------------------动画的滑出---------------------------------------------//
$("button").eq(2).click(function(){
//画出动画用法1:slideUp();不加参数
$("div").slideUp()//同上 括号里面的(数字;毫秒值,字符串:回调函数;动画执行完毕之后再执行函数)
});
//----------------------------动画的切换----------------------------------------------------//
$("button:eq(3)").click(function () {
//滑入滑出切换
//同样有四种用法 两个属性来回切换。
$("div").slideToggle(1000);
})
});
//-------------------------停止动画---------------------------------------------------------//
//括号里面的 第一个参数 表示后续动画是否执行;第二个参数 表示当前动画是否执行完;
//括号里面的第二个参数false 表示当前动画不执行完毕,第一个参数false表示后续动画会执行;
$("div").stop();//括号里面 放两个bool类型 //当里面什么都不填的时候 所有动画都停止不执行 默认 false;
//四种情况
//1.点击停止时 ,当前动画 执行完毕 在停止 后续动画不会执行;
$("div").stop(true,true);
//2.点击停止时,当前动画 立即停止 不执行完,后续动画不会执行;
$("div").stop(true,false);
//3.点击停止时当前动画会 立刻执行完毕,后续动画也会执行;
$("div").stop(false,true);
//4.点击停止时 当前动画 立即停止 不会执行完毕,后续动画执行完毕;
$("div").stop(false,false);
</script>
</head>
<body>
<button>显示</button>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>
</body>
</html>
jquery的动画 显示 隐藏 效果 停止
最新推荐文章于 2021-09-12 19:30:45 发布