标签：jQuery 动画 function click input div animate
文章目录
三组基本动画
show不传参数，没有动画效果
$("div").show();
show(speed)
speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
fast:200ms normal:400ms slow:600
$("div").show("ddd");
动画展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
// show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
</script>
</body>
</html>
1、滑入滑出动画
- 滑入（slideDown）
- 滑出：slideU
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="来来回回">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//滑入（slideDown） 滑出：slideU
$("input").eq(0).click(function () {
//slideDown：如果不传参数，有一个默认值normal
//$("div").slideDown();
//$("div").slideDown(1000);
$("div").slideDown(1000, function () {
console.log("乌拉拉");
});
});
$("input").eq(1).click(function () {
$("div").slideUp(2000, function () {
console.log("我滑走了 哈哈哈 这句话打印用两秒")
});
})
$("input").eq(2).click(function () {
$('div').slideUp(1000);
$("div").slideDown(2000, function () {
console.log("我滑走又回来了 哈哈哈 这句话打印用两秒")
});
})
$("input").eq(3).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
</body>
</html>
2、淡入淡出动画
- 淡入：fadeIn
- 淡出：fadeOut
- 切换：fadeToggle （如果是滑入状态，就执行滑出的动画，反之一样）人家就是这样用的 你别犟 这就是个封装好的方法，不用管别的 我天
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
</script>
</body>
</html>
3、自定义动画
animate（）
- 第一个参数：对象，里面可以传需要动画的样式
- 第二个参数：speed 动画的执行时间
- 第三个参数：动画的执行效果
- 第四个参数：回调函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: blue;
margin-top: 150px;
}
#box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000);
//swing:秋千 摇摆
$("#box2").animate({left:800}, 8000, "swing");
//linear:线性 匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});
})
});
</script>
</body>
</html>
动画队列
把这些动画存储到一个动画队列里面，构成一组动画，来完成一套动作
animate（）. animate()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({left:800})
.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})
})
});
</script>
</body>
</html>
停止动画
三种方法：
- stop:停止当前正在执行的动画
- clearQueue:是否清除动画队列 true false
- jumpToEnd:是否跳转到当前动画的最终效果 true false
.stop().animate();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function () {
// stop:停止当前正在执行的动画
// clearQueue:是否清除动画队列 true false
// jumpToEnd:是否跳转到当前动画的最终效果 true false
//.stop().animate();
$("div").stop(true, true);
})
});
</script>
</body>
</html>
标签：jQuery,动画,function,click,input,div,animate 来源： https://blog.csdn.net/weixin_45525272/article/details/111402717
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。