jQuery效果

jQuery效果#

常见jQuery效果#

jQuery封装了很多动画效果，最为常见的如下：

#

• show()
• hide()
• toggle()

#

• slideDown()
• slideUp()
• slideToggle()

#

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

#

• animate()

显示隐藏及切换效果#

一般情况下不使用这类参数，直接显示隐藏即可

显示隐藏语法规范#

                    
jQuery
                    show([speed,[easing],[fn]])
                    hide([speed,[easing],[fn]])
                    toggle([speed,[easing],[fn]])
                

显示隐藏及切换参数#

1. 参数都可以省略，无动画直接显示
2. speed ：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）。
3. easing ：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"。
4. fn ：回调函数，在动画完成时执行的函数，每个元素执行一次。

显示 隐藏 切换

滑动效果#

滑动语法规范（与显示隐藏效果规范一致）#

                    
jQuery
                    slideUp([speed,[easing],[fn]])
                    slideDown([speed,[easing],[fn]])
                    slideToggle([speed,[easing],[fn]])
                

参数与显示隐藏一致

显示 隐藏 切换

事件切换#

事件切换语法规范#

                    
jQuery
                    hover([over,]out)
                

事件切换参数#

1. over：鼠标移到元素上要触发的函数（相当于mouseenter）
2. out：鼠标移出元素要触发的函数（相当于mouseleave）

实例#

                    
jQuery
                    // 1.事件切换hover就是鼠标经过和离开的复合写法
                    $('.nav>li').hover(function() {
                        // over
                        $(this).children('ul').slideDown(500);
                    }, function() {
                        // out
                        $(this).children('ul').slideUp(500);
                    });
                    // 2.事件切换hover若只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
                    $('.nav>li').hover(function() {
                        $(this).children('ul').slideToggle(500);
                    });
                

动画队列及其停止排队方法#

动画或效果队列#

动画或者效果一旦触发就会执行，若多次触发，就会造成多个动画或者效果排队执行（抽风[doge]）。

停止排队#

                    
jQuery
                    stop()
                

1. stop()方法用于停止动画或效果
2. 注意：stop()写到动画或者效果的 前面 ，相当于停止上一次的动画

                    
jQuery
                    $('.nav>li').hover(function() {
                        // stop()方法必须写到动画前面
                        $(this).children('ul').stop().slideToggle(500);
                    });
                

淡入淡出效果#

淡入淡出效果语法规范#

                    
jQuery
                    fadeIn([speed,[easing],[fn]])
                    fadeOut([speed,[easing],[fn]])
                    fadeToggle([speed,[easing],[fn]])
                

淡入淡出及切换效果参数同显示隐藏参数

淡入 淡出 切换 修改透明度

渐进式调整到指定的不透明度#

                    
jQuery
                    fadeTo([[speed],opacity,[easing],[fn]])
                

调整透明度效果参数#

1. opacity：透明度 必须写 ，取值0~1
2. speed：三种预定速度之一的字符串（'slow'，'normal'，'fast'）或表示动画时长的毫秒数， 必须写
3. easing
4. fn

• 
• 
• 
• 
• 
• 

自定义动画animate#

语法#

                    
jQuery
                    animate(params,[speed],[easing],[fn])
                

参数#

1. params：想要更改的样式属性，以对象形式传递， 必须写 。属性名可以不用带引号，若是复合属性则需要采取 驼峰命名法 如borderLeft。其余参数可省略。
2. speed
3. easing
4. fn

实例#

                    
jQuery
                    $('.move button').click(function() {
                    $('.move .testbox').animate({
                    marginLeft: 200,
                    marginTop: 40,
                    opacity: .4,
                    width: 200
                    }, 500);
                    });
                

动起来