jQuery-01 (4)

jQuery-01

jQuery-01

代码演示

<body> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { // 淡入 fadeIn() $("div").fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut(1000); }) $("button").eq(2).click(function() { // 淡入淡出切换 fadeToggle() $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5); }); }); </script> </body> 1.5.4 自定义动画

​ 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() ;

​ 语法规范如下:

jQuery-01

代码演示

<body> <button>动起来</button> <div></div> <script> $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) </script> </body> 1.5.5 停止动画排队

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

​ 停止动画排队的方法为:stop() ;

stop() 方法用于停止动画或效果。

stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

​ 总结: 每次使用动画之前,先调用 stop() ,在调用动画。

1.5.6. 事件切换

​ jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out) // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数(相当于mouseenter)

out:鼠标移出元素要触发的函数(相当于mouseleave)

如果只写一个函数,则鼠标经过和离开都会触发它

hover事件和停止动画排列案例

<body> <ul> <li> <a href="#">微博</a> <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul> </li> <li> <a href="#">微博</a> <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul> </li> </ul> <script> $(function() { // 鼠标经过 // $(".nav>li").mouseover(function() { // // $(this) jQuery 当前元素 this不要加引号 // // show() 显示元素 hide() 隐藏元素 // $(this).children("ul").slideDown(200); // }); // // 鼠标离开 // $(".nav>li").mouseout(function() { // $(this).children("ul").slideUp(200); // }); // 1. 事件切换 hover 就是鼠标经过和离开的复合写法 // $(".nav>li").hover(function() { // $(this).children("ul").slideDown(200); // }, function() { // $(this).children("ul").slideUp(200); // }); // 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面 $(this).children("ul").stop().slideToggle(); }); }) </script> </body> 1.5.7. 案例:王者荣耀手风琴效果

思路分析:
1.鼠标经过某个小li 有两步操作:
2.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
3.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出

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

1.6. 今日总结

jQuery-01

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

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