JQuery的基本动画和自定义动画
2019-05-03 14:56
1071 查看
基本动画：
1、show-hide-toggle
[code]<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('button:first').click(function() {
// 作用: 让一个元素显示
// 修改了元素的width 和 height 和opacity 进行动画
// 参数1：
// 1. 如果没有参数，没有动画效果
// 2. 参数可以指定为一个时间， 毫秒值， 动画的时间
// 3. 参数还可以是固定的字符串， fast:快=200ms normal：正常=400ms slow:慢=600ms
// 参数2：
// 回调函数， 表示当动画执行完成后，这个函数 就会调用
$('div').show(1000, function() {
console.log('动画执行完成了');
});
});
$('button').eq(1).click(function() {
$('div').hide(1000);
});
$('button').eq(2).click(function() {
// 如果是显示状态，就会隐藏， 如果是隐藏装填，就会显示
$('div').toggle(1000);
})
/*
show:显示
hide:隐藏
toggle：切换
*/
</script>
</body>
2、fadeIn-fadeout-fadeToggle：
[code]<style>
div {
width: 400px;
height: 400px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('button').eq(0).click(function() {
// fade系列：用来让一个元素淡入和淡出的效果
// 作用：淡入 慢慢的显示出来 修改是透明度
// 参数1： 如果没有，默认是normal
// $('div').fadeIn(1000);
$('div').fadeIn(1000, function() {
console.log('动画结束了');
})
});
$('button').eq(1).click(function() {
$('div').fadeOut(1000);
});
// 转场动画
$('button').eq(2).click(function() {
$('div').fadeToggle();
})
</script>
</body>
3、slideDown-slideUp-slideToggle：
[code]<style>
div {
width: 400px;
height: 400px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('button').eq(0).click(function() {
// $('div').slideDown();
$('div').slideDown(1000);
});
$('button').eq(1).click(function() {
$('div').slideUp();
});
// 转场动画
$('button').eq(2).click(function() {
$('div').slideToggle();
});
</script>
</body>
自定义动画：
[code]<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
div:nth-of-type(2) {
margin-top: 200px;
}
</style>
</head>
<body>
<button>显示</button>
<div></div>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('button').eq(0).click(function() {
// jquery中提供了一个方法 animate用来执行自定义的动画
/*
功能： 给元素执行自定义动画
参数1： 必填
指定需要执行动画的样式， 是一个对象
参数2 指定动画的时间 默认是normal
参数3 指定动画效果 默认：swing(秋千，摇摆) 先慢后快再慢 linear
参数4： 函数， 动画结束后就会执行
*/
// $('div').animate({ width: '400px', height: 400, borderRadius: 200} )
$('div').eq(0).animate({left: 1000}, 5000);
$('div').eq(1).animate({left: 1000}, 5000, 'linear', function() {
console.log('动画执行结束了');
});
});
</script>
</body>
jquery的动画队列：
[code]<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
// jquery为了保证动画不丢失， 把所有要执行的动画都保存到一个动画队列中，动画一个一个执行。
// 好处
// 1. 跑到left:400的地方
// 2. 宽度变大为300
// 3. 高度变为300
// 4. 变圆
// 回调地狱
// $('div').animate({left: 400}, function() {
// $('div').animate({width: 300}, function() {
// $('div').animate({height: 300}, function(){
// $('div').animate({borderRadius: 150})
// })
// })
// });
$('div').animate({left: 400}).animate({width: 300}).animate({height: 300}).animate({borderRadius: 150})
</script>
</body>
stop方法与停止动画：
[code]<style>
div {
width: 400px;
height: 400px;
display: none;
background-color: pink;
}
</style>
</head>
<body>
<button>开始</button>
<button>停止</button>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('button').eq(0).click(function() {
$('div').stop(true).slideDown(2000);
})
$('button').eq(1).click(function() {
// 停止当前这个执行的这个动画
// 参数1： 是否清除动画队列 clearQueue false
// 参数2： 是否跳转到当前动画最终效果 false true
$('div').stop(false, false);
})
});
</script>
</body>
案例：
旋转木马：
[code]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
<style>
.slide li {
transition: all .4s;
}
.slide .slide1 {
width: 400px;
top: 20px;
left: 50px;
opacity: 0.2;
z-index: 2;
}
.slide .slide2 {
width: 600px;
top: 70px;
left: 0;
opacity: 0.8;
z-index: 3;
}
.slide .slide3 {
width: 800px;
top: 100px;
left: 200px;
opacity: 1;
z-index: 4;
}
.slide .slide4 {
width: 600px;
top: 70px;
left: 600px;
opacity: 0.8;
z-index: 3;
}
.slide .slide5 {
width: 400px;
top: 20px;
left: 750px;
opacity: .2;
z-index: 2;
}
4000
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
var arr = ['slide1', 'slide2', 'slide3', 'slide4', 'slide5'];
var $li = $("#wrap li");
var flag = true;
for(var i = 0; i < $li.length; i++) {
$li.eq(i).addClass(arr[i]);
}
$('#arrRight').click(function() {
if (flag) {
flag = false;
arr.unshift(arr.pop());
for(var i = 0; i < $li.length; i++) {
// removeClass():删除所有的类
$li.eq(i).removeClass().addClass(arr[i]);
}
}
});
$('#arrLeft').click(function() {
arr.push(arr.shift());
for(var i = 0; i < $li.length; i++) {
// removeClass():删除所有的类
$li.eq(i).removeClass().addClass(arr[i]);
}
});
// 等li的过渡结束，把flag 改成true
$li[0].addEventListener('transitionend', function() {
flag = true;
})
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 自定义动画概述及示例
- Jquery 自定义动画概述及示例
- jQuery自带的几个基本动画
- JQuery->自定义动画的运行
- JQuery自定义动画animate方法
- JQuery自定义动画animate方法
- Jquery 自定义动画同步进行如何实现？
- jQuery自定义动画
- jQuery中利用递归思想练习自定义动画
- jQuery 效果 - animate() 方法 自定义动画效果
- jQuery中的自定义动画animate函数中的step基础的解释
- jquery.animate自定义动画的函数
- JQuery 自定义动画案例
- jQuery 自定义 动画
- jQuery中实现动画效果的基本操作介绍
- JQUERY自定义动画函数
- 用jQuery实现自定义动画
- jQuery自定义动画
- jquery自定义动画
- jQuery自定义动画函数实例详解(附demo源码)