1. 例子: 选项卡
- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 选项卡
- </title>
- <script type="text/javascript" src="../jQuery 库 / jquery-3.3.1.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- var $btn = $('.btns input');
- var $slide = $('.cons .slide');
- /*alert($div.length), 判断是否获取 */
- $btn.click(function() {
- /* 移出除当前的类, siblings 选择同辈元素 */
- $(this).addClass('current').siblings().removeClass('current');
- /*index() 显示索引 */
- /*$div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');*/
- /*stop() 防止重复点击, animate() 动画效果 */
- $slide.stop().animate({
- 'left': -500 * $(this).index()
- });
- })
- })
- </script>
- <style type="text/CSS">
- .btns input{ width: 100px; height: 40px; background-color: antiquewhite;
- border: 0;/* 给宽高会有边框 */ } .btns .current{ background-color: aqua; } .cons{
- width: 500px; height: 200px; overflow: hidden; position: relative; } .slide{
- width: 1500px; height: 200px; position: absolute; left: 0; top: 0; } .cons
- .slide div{ width: 500px; height: 200px; background-color: aquamarine;
- line-height: 200px; text-align: center; font-size: 30px; float: left; }
- /*.cons .div1{ display: block; }*/
- </style>
- </head>
- <body>
- <div class="btns">
- <input type="button" name="" value="01" class="current">
- <input type="button" name="" value="02">
- <input type="button" name="" value="03">
- </div>
- <div class="cons">
- <div class="slide">
- <div>
- 选项卡 1
- </div>
- <div>
- 选项卡 2
- </div>
- <div>
- 选项卡 3
- </div>
- </div>
- </div>
- </body>
- </HTML>
2.animate 动画
可以设置元素某属性值上的动画, 可以设置一个或多个属性值, 动画执行完成后会执行一个函数
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 动画
- </title>
- <script type="text/javascript" src="../jQuery 库 / jquery-3.3.1.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- $('#btn').click(function() {
- /* 分步执行, 延时 1000ms*/
- $('.box').animate({
- 'width': 100
- },
- 1000,
- function() {
- $('.box').animate({
- 'height': 100
- },
- 1000,
- function() {
- $('.box').animate({
- 'opacity': 0.4
- });
- });
- });
- }) $('#btn01').click(function() {
- /* 每次点击加一百 */
- $('.box01').stop().animate({
- 'width': '+=100'
- })
- })
- })
- </script>
- <style type="text/css">
- .box,.box01{ width: 300px; height: 300px; background-color: antiquewhite;
- }
- </style>
- </head>
- <body>
- <input type="button" value="动画" id="btn">
- <div class="box">
- </div>
- <br>
- <br>
- <input type="button" value="动画" id="btn01">
- <div class="box01">
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2912382.html