jQuery效果

最新推荐文章于 2024-11-08 16:09:18 发布

Eli-sun

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量101

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/vfjcgg/article/details/105979755

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery效果
jQuery给我们封装了很多动画效果，最为常见的如下：
jQuery一般都是用双引号，很多文献和资料及网页里面都是用的双引号，想必用双引号也是极好的。

显示隐藏
show()
hide()
toggle()

滑动
slideDown()
slideUp()
slideToggle()

淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

自定义动画
animate()

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

事件切换
hover([over,] out)
(1)over:鼠标移到元素上要触发的函数（相当于mouseenter）
(2)out:鼠标移出元素要触发的函数（相当于mouseleave）
事件切换：hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

$('.nav>li').hover(function(){
	$(this).children('ul').slideToggle();
})

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

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

淡入淡出效果：
1.淡入效果语法规范
fadeIn([speed,[easing],[fn]])
2.淡入效果参数
(1)参数都可以省略
(2)speed:三种预定速度之一的字符串（‘show’,‘nomal’, or ‘fast’）或表示动画时长的毫秒数值（如：100）。
(3)easing:(Optional)用来指定切换效果，默认是’swing’, 可用参数’linear’。
(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
淡入效果同上
1.渐进方式调整到指定的不透明度
fadeTo([[speed],cpacity,[easing],[fn]])
2.效果参数
(1)opacity:透明度必须写，取值0-1之间。
(2)speed:三种预定速度之一的字符串（‘show’,‘nomal’, or ‘fast’）或表示动画时长的毫秒数值（如：100）。必须写
(3)easing:(Optional)用来指定切换效果，默认是’swing’, 可用参数’linear’。
(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

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

        })

自定义动画animate
1.语法
animate(params,[speed],[easing],[fn])
2.参数
(1)params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft,其余参数都可省略。
(2)speed:三种预定速度之一的字符串（‘show’,‘nomal’, or ‘fast’）或表示动画时长的毫秒数值（如：100）。
(3)easing:(Optional)用来指定切换效果，默认是’swing’, 可用参数’linear’。
(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

显示与隐藏案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 100px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

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

</html>

滑动效果案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<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()
            })
        })
    </script>
</body>

</html>

淡入淡出效果案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

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

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

        // })
    </script>
</body>

</html>

自定义动画animate 案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 200,
                    top: 300,
                    opacity: .4,
                    width: 500,
                }, 500)
            })
        })
    </script>
</body>

</html>