jQuery-01 (3)

思路分析:
1.点击上部的li,当前li 添加current类,其余兄弟移除类。
2.点击的同时,得到当前li 的索引号
3.让下部里面相应索引号的item显示,其余的item隐藏

​ 代码实现略。(详情参考源代码)

1.5. jQuery 效果

​ jQuery 给我们封装了很多动画效果,最为常见的如下:

显示隐藏:show() / hide() / toggle() ;

划入画出:slideDown() / slideUp() / slideToggle() ;

淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

自定义动画:animate() ;

注意:

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

1.5.1. 显示隐藏

​ 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

​ 语法规范如下:

jQuery-01

jQuery-01

jQuery-01

代码演示

<body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1); }); }) $("button").eq(2).click(function() { $("div").toggle(1000); }) // 一般情况下,我们都不加参数直接显示隐藏就可以了 }); </script> </body> 1.5.2. 滑入滑出

​ 滑入滑出动画,常见有三个方法:slideDown() / slideUp() / slideToggle() ;

​ 语法规范如下:

jQuery-01

jQuery-01

jQuery-01

代码演示

<body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 下滑动 slideDown() $("div").slideDown(); }) $("button").eq(1).click(function() { // 上滑动 slideUp() $("div").slideUp(500); }) $("button").eq(2).click(function() { // 滑动切换 slideToggle() $("div").slideToggle(500); }); }); </script> </body>

小案例:下拉菜单略(详情参看源码)。

1.5.3 淡入淡出

​ 淡入淡出动画,常见有四个方法:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

​ 语法规范如下:

jQuery-01

jQuery-01

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwfpfy.html