jQuery之动画
2021-01-22 23:12
标签：htm show var splay jquer char lan 隐藏 需求 说明： 不断改变元素的高度来实现的。 方法： slideDown()：带动画的展开。 slideUp()：带动画的收缩。 slideToggle()：带动画的切换展开/收缩。 示例： 说明： 不断改变元素的透明度来实现的。 方法： fadeIn()：带动画的显示。 fadeOut()：带动画隐藏。 fadeToggle()：带动画切换显示/隐藏。 示例： 说明： 不断改变元素的尺寸和透明度来实现，显示隐藏，默认没有动画。 方法： show()：(不)带动画的显示。 hide()：(不)带动画的隐藏。 toggle()：(不)带动画的切换显示/隐藏。 示例： 说明： jQuery动画本质是在指定时间内不断改变元素样式值来实现的。 方法： animate()：自定义动画效果的动画。 stop()：停止动画。 示例： jQuery之动画 标签：htm show var splay jquer char lan 隐藏 需求 原文地址：https://www.cnblogs.com/hfl1996/p/13283993.html滑动
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>滑动title>
style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
style>
head>
body>
button id="btn1">慢慢收缩button>
button id="btn2">慢慢展开button>
button id="btn3">收缩/展开切换button>
div class="div1">
div>
script type="text/javascript" src="../js/jquery.min.js">script>
script type="text/javascript">
/*
* 需求：
* 1.点击btn1，向上滑动
* 2.点击btn3，向下滑动
* 3.点击btn3，向上/向下切换
*/
$(function (){
//1.点击btn1，向上滑动
$(‘#btn1‘).click(function () {
$(‘div‘).slideUp()
});
//2.点击btn3，向下滑动
$(‘#btn2‘).click(function () {
$(‘div‘).slideDown()
});
//3.点击btn3，向上/向下切换
$(‘#btn3‘).click(function () {
$(‘div‘).slideToggle(2000)
});
});
script>
body>
html>
淡入淡出
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>淡入淡出title>
style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
style>
head>
body>
button id="btn1">慢慢淡出button>
button id="btn2">慢慢淡入button>
button id="btn3">淡出/淡入切换button>
div class="div1">
div>
script type="text/javascript" src="../js/jquery.min.js">script>
script type="text/javascript">
/*
* 需求：
* 1.点击btn1，慢慢淡出
* 无参
* 有参：
* 字符串参数
* 数字参数
* 2.点击btn3，慢慢淡入
* 3.点击btn3，淡出/淡入切换，动画结束时提示动画结束了
*
*/
$(function (){
//1.点击btn1，实现慢慢淡出
$(‘#btn1‘).click(function () {
//$(‘.div1‘).fadeOut();
//$(‘.div1‘).fadeOut(1000);
$(‘.div1‘).fadeOut(‘fast‘);
/*
* fast：200
* normal：400
* fast：600
*/
});
//2.点击btn3，实现慢慢淡入
$(‘#btn2‘).click(function () {
$(‘.div1‘).fadeIn();
});
//3.点击btn3，实现淡出/淡入切换
$(‘#btn3‘).click(function () {
$(‘.div1‘).fadeToggle(function () {
alert(‘动画结束了‘);
})
});
});
script>
body>
html>
显示/隐藏
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>显示与隐藏title>
style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
display: none;
}
style>
head>
body>
button id="btn1">瞬间显示button>
button id="btn2">慢慢显示button>
button id="btn3">慢慢隐藏button>
button id="btn4">显示隐藏切换button>
div class="div1">
div>
script type="text/javascript" src="../js/jquery.min.js">script>
script type="text/javascript">
/*
* 需求：
* 1.点击btn1，立即显示
* 2.点击btn2，慢慢显示
* 3.点击btn3，慢慢隐藏
* 4.点击btn4，切换显示/隐藏
*/
$(function (){
//1.点击btn1，立即显示
$(‘#btn1‘).click(function () {
$(‘div‘).show();
});
//2.点击btn2，慢慢显示
$(‘#btn2‘).click(function () {
$(‘div‘).show(1000);
});
//3.点击btn3，慢慢隐藏
$(‘#btn3‘).click(function () {
$(‘div‘).hide(2000);
});
//4.点击btn4，切换显示/隐藏
$(‘#btn4‘).click(function () {
$(‘div‘).toggle();
});
});
script>
body>
html>
自定义
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>自定义动画title>
style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
}
style>
head>
body>
button id="btn1">逐渐扩大button>
button id="btn2">移动到指定位置button>
button id="btn3">移动指定距离button>
button id="btn4">停止动画button>
div class="div1">
爱在西元前
div>
script type="text/javascript" src="../js/jquery.min.js">script>
script type="text/javascript">
/*
* 需求：
* 1.逐渐扩大
* 1)宽/高都扩为200px
* 2)宽先扩为200px，高后扩为200px
* 2.移动到指定位置
* 1)移动到(500, 100)处
* 2)移动到(100, 20)处
* 3.移动指定的距离
* 1)移动距离为(100, 50)
* 2)移动距离为(-100, -20)
* 4.停止动画
*/
var $div1 = $(‘.div1‘);
/*
* 1.逐渐扩大
* 1)宽/高都扩为200px
* 2)宽先扩为200px，高后扩为200px
*/
$(‘#btn1‘).click(function () {
//宽/高都扩为200px
$div1.animate({
width: 200,
height: ‘200px‘
}, 1000);
//宽先扩为200px，高后扩为200px
$div1.animate({
width: 200
}, 2000)
.animate({
height: 200
}, 2000);
});
/*
* 2.移动到指定位置
* 1)移动到(500, 100)处
* 2)移动到(100, 20)处
*/
$(‘#btn2‘).click(function () {
//移动到(500, 100)处
$div1.animate({
left: 500,
top: 100
}, 1000);
//移动到(100, 20)处
$div1.animate({
left: 100,
top: 20
}, 1000);
});
/*
* 3.移动指定的距离
* 1)移动距离为(100, 50)
* 2)移动距离为(-100, -20)
*/
$(‘#btn3‘).click(function () {
//移动距离为(100, 50)
$div1.animate({
left: ‘+=100‘,
top: ‘+=50‘
}, 1000);
//移动距离为(-100, -20)
$div1.animate({
left: ‘-=100‘,
top: ‘-=20‘
}, 1000)
});
/*
* 4.停止动画
*/
$(‘#btn4‘).click(function () {
$div1.stop();//只停止当前运行的动画(后面其它动画还会运行)
//$div1.stop(true);//停止所有动画
//$div1.stop(true, true);
});
script>
body>
html>