JavaScript jQuery效果

柒边形选手

已于 2022-02-11 20:37:52 修改

阅读量303

点赞数

分类专栏：笔记文章标签： javascript jquery 动画

于 2022-02-11 20:21:36 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122849144

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

1.显示语法规范
show ( [ speed, [easing], [fn]])
hide ( [ speed, [easing], [fn]])
toggle ( [ speed, [easing], [fn]])
显示参数
(1)参数都可以省略，无动画直接显示。
(2) speed:三种预定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
(3) easing : (Optional)用来指定切换效果,默认是"swing"（由快到慢）,可用参数"linear"（匀速）。
(4) fn:回调函数,在动画完成时执行的函数,每个元素执行次。

<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>

2.下滑效果语法规范
slideDown( [speed, [easing], [fn] ])
slideUp( [speed, [easing], [fn] ])
slideToggle( [speed, [easing], [fn] ])

hover([over,]out)
( 1 ) over:鼠标移到元索上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )

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

<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>

3.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
必须停止排队：stop()
(1) stop()方法用于停止动画或效果。
(2)注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

hover以及停止排队的运用（tap栏滑动效果）：

<body>
    <ul class="nav">
        <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>
        <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>

4. 淡入淡出切换效果
fadeIn( [speed, [easing] , [fn]])
fadeOut( [speed, [easing] , [fn]])
fadeToggle( [speed, [easing] , [fn]])
(1）参数都可以省略。
(2) speed :三种预定速度之一的字符串(“slow”,"normal",or“fast”)或表示动画时长的毫秒数值(如∶1000)。
(3) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

<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>

5.渐进方式调整到指定的不透明度
fadeTo ([speed] , opacity, [easing], [fn]])
( 1 ) opacity透明度必须写,取值0~1之间。
( 2 ) speed :三种预定速度之-的字符串( "slow" ，"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
(3 ) easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear”.

可以用来设置高亮效果

    <script>
        $(function() {
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })
        });
    </script>

柒边形选手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript jQuery效果

1.显示语法规范show ( [ speed, [easing], [fn]])hide ( [ speed, [easing], [fn]])toggle ( [ speed, [easing], [fn]])2.下滑效果语法规范slideDown( [speed, [easing], [fn] ])slideUp( [speed, [easing], [fn] ])slideToggle( [speed, [easing], [fn] ])hover([over,]out)( 1
复制链接

扫一扫