05-jQuery动效笔记

最新推荐文章于 2022-12-13 13:43:21 发布

༺.雨巷.༻

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量6.4k

点赞数 2

本文链接：https://blog.csdn.net/xue1163/article/details/107034943

版权

一、jQuery显示和隐藏动效

语法

$(selector).hide(speed,callback); // 隐藏

$(selector).show(speed,callback); // 显示

$(selector).toggle(speed,callback); // 切换

speed 参数规定隐藏/显示的速度，可以取值为毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

案例代码

            $("button").eq(0).click(function(){
                // $('div').css('display','block');
                $('div').show(1000,function(){
                    alert('显示完成');
                });
            });
            $("button").eq(1).click(function(){
                // $('div').css('display','none');
                $("div").hide(1000,function(){
                    alert('隐藏完成');
                });
            });
            $("button").eq(2).click(function(){
                $('div').toggle(1000,function(){
                    alert('切换完成');
                });
            });

效果展示

二、jQuery对联广告案例

scroll用于监听滚动事件

案例代码

            // 1.监听网页的滚动
            $(window).scroll(function(){
                // 1.1获取网页滚动的偏移位
                var offset = $('html,body').scrollTop();
                // 1.2判断网页是否滚动到了指定位置
                if(offset >= 500){
                    // 1.3显示广告
                    $('img').show(1000);
                }else{
                    // 1.4隐藏广告
                    $('img').hide(1000);
                }
            })

效果展示

三、jQuery展开和收起动画

语法

.slideUp( time ,fn)    // 收起
.slideDown( time ,fn )  // 展开
.slideToggle( time ,fn ) //切换

time : 展开/收起动画执行的时间，单位：毫秒。

fn ：动画执行完成后的回调函数。

案例代码

            $('button').eq(0).click(function(){
                $('div').slideDown(1000,function(){
                    alert('展开完毕');
                });
            });
            $('button').eq(1).click(function(){
                $('div').slideUp(1000,function(){
                    alert('收起完毕');
                });
            });
            $('button').eq(2).click(function(){
                $('div').slideToggle(1000,function(){
                    alert('切换完毕');
                });
 
            });

   

3. 效果展示

![N4cZSP.gif](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMS5heDF4LmNvbS8yMDIwLzA2LzMwL040Y1pTUC5naWY)

## 四、折叠菜单案例

1. 案例代码

   ```js
       <script>
           $(function(){
               // 1.监听一级菜单的点击事件
               $('.nav>li').click(function(){
                   // 1.1拿到二级菜单
                   var $sub = $(this).children(".sub");
                   // 1.2让二级菜单展开
                   $sub.slideDown(1000);
                   // 1.3拿到所有非当前的二级菜单
                   var otherSub = $(this).siblings().children('.sub');
                   // 1.4让所有非当前的二级菜单收起
                   otherSub.slideUp(1000);
                   // 1.5让背点击的一级菜单箭头旋转
                   $(this).addClass('current');
                   // 1.6让所有非被点击的一级菜单箭头还原
                   $(this).siblings().removeClass('current');
                   }); 
                   // 1.5让背点击的一级菜单箭头旋转
                   $(this).addClass('current');
                   // 1.6让所有非被点击的一级菜单箭头还原
                   $(this).siblings().removeClass('current');
                   
           });
       </script>

五、jQuery淡入淡出动画效果

语法

.fadeIn(one,two); // 淡入
.fadeOut(one,two); // 淡出
.fadeToggle(one,two); // 切换
.fadeTo(one,three,two);  // 淡入到某种程度

one ：执行动画的时长

two ：动画执行完毕后的回调函数

three ：淡入透明度的程度

案例代码

        $(function(){
            $('button').eq(0).click(function(){
                $('div').fadeIn(1000,function(){
                    alert('淡入完毕');
                });
            });
            $('button').eq(1).click(function(){
                $('div').fadeOut(1000,function(){
                    alert('淡入完毕');
                });
            });
            $('button').eq(2).click(function(){
                $('div').fadeToggle(1000,function(){
                    alert('淡入完毕');
                });
            });
            $('button').eq(3).click(function(){
                $('div').fadeTo(1000,0.3,function(){
                    alert('淡入完毕');
                });
            });
        });
    </script>

效果展示

六、自定义动画

语法
```
.animate(one,two,three,four)
```
第一个参数：接收一个对象，可以在对象中修改属性

第二个参数：指定动画时长

第三个参数：指定动画节奏，默认就是swing

第四个参数：动画执行完毕之后的回调函数
案例代码

        $(function(){
            $("button").eq(0).click(function(){
                // $('.one').animate({
                //     width:500,height:200
                // },1000,function(){
                //     alert('执行完毕');
                // });

                $('.one').animate({
                    marginLeft:500
                },5000,function(){
                    // alert('执行完毕');
                });

                /*
                    第一个参数：接收一个对象，可以在对象中修改属性
                    第二个参数：指定动画时长
                    第三个参数：指定动画节奏，默认就是swing
                    第四个参数：动画执行完毕之后的回调函数
                */

                $('.two').animate({
                    marginLeft:500
                },5000,"linear",function(){
                    // alert('执行完毕');
                });
            });
            $("button").eq(1).click(function(){
                $('.one').animate({
                    width:"+=100"  
                },1000,function(){
                    // alert('加载完毕');
                });
            });
            $("button").eq(2).click(function(){
                $('.one').animate({
                    // width:"hide",
                    width:"toggle"
                },1000,function(){
                    // alert('加载完毕');
                });
            });
        });
    </script>

效果展示

七、无限循环滚动

案例代码

        $(function(){
            // 0.定义变量保存偏移位
            var offset = 0;
            // 1.让图片滚动起来
            var timer;
            function autoPlay(){
                timer = setInterval(function(){
                offset += -10;
                if(offset<=-640){
                    offset = 0;
                }
                $('ul').css("marginLeft",offset);
            },100);}
            autoPlay();
            $('li').hover(function(){
                // 停止滚动
                clearInterval(timer);
                // 给非当前选中添加蒙版
                $(this).siblings().fadeTo(100,0.5);
                // 去除当前选中的蒙版
                $(this).fadeTo(100,1)
            },function(){
                // 继续滚动
                autoPlay();
                // 去除所有的蒙版
                $('li').fadeTo(100,1);
            });
        });
    </script>

unction(){
// 继续滚动
autoPlay();
// 去除所有的蒙版
$(‘li’).fadeTo(100,1);
});
});


2. 效果展示
![NN6ubq.gif](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMS5heDF4LmNvbS8yMDIwLzA2LzIzL05ONnVicS5naWY)

༺.雨巷.༻

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-jQuery动效笔记

一、jQuery显示和隐藏动效语法$(selector).hide(speed,callback); // 隐藏$(selector).show(speed,callback); // 显示$(selector).toggle(speed,callback); // 切换speed 参数规定隐藏/显示的速度，可以取值为毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。案例代码 $("button").eq(0).click(fun
复制链接

扫一扫