jQuery实现动态效果

写在前面

使用jQuery简直不要太舒服啊，有人说jQuery过时了，没必要学。但是，你不学你就一直是过时的，过时的技术你都不学都不了解何谈新型技术？不要好高骛远，一步一步的来吧，很多事情都是水到渠成的，急不得。好好加油鸭！

今天学习了，jQuery效果。主要是让元素实现显示隐藏、上拉下拉、淡入淡出的这些动态效果，反正都是一些jQuery对象方法的使用，很好用的。先来梳理知识点吧。

 

jQuery效果

再开始之前，先补充一个小的知识点 —— 动画排队

防止动画或效果排队现象，就是做了一个动画，如果频繁的去触发多个元素同一个事件，动画效果会排队实现，一个动画完成后才会执行下一个，知道执行完所有触发的动画。举个例子：给每5张图片添加鼠标滑过时实现下拉滑动的效果，当鼠标从第一张快速滑到最后一张时，动画会依次执行，鼠标都滑过完毕了，图片下拉效果还没有完成，并不是按照我们鼠标经过时立马执行。这就是动画排队效果。为了避免这样的bug，我们都会在动画前让他停止动画排队——stop()。

下面所有的方法都有统一相同的三个参数

a [speed]：显示和隐藏的速度（ 时间）slow、normal、 fast 也可以设置数字时间（ms）

b [easing]：时间的快慢  "linear" 和 "swing  一般不设置 使用默认值swipe

c [fn]：回调函数，在动画完成时执行的函数

 

1. 显示、隐藏、切换显示隐藏

hide()   显示元素

show()   隐藏元素

toggle()  切换元素显示和隐藏的状态

这三个方法一般不用参数，直接调用即可。

    <section>
        <button class="show">显示</button>
        <button class="hide">隐藏</button>
        <button class="toggle">切换</button>
        <div class="div1">div1</div>
    </section>

            $(".show").click(function () {
                $(".div1").show();
            });
            $(".hide").click(function () {
                $(".div1").hide();
            });
            $(".toggle").click(function () {
                $(".div1").stop().toggle();
            });

2. 下拉滑动、上拉滑动、切换滑动

slideDown()  下拉滑动

slidUp()  上拉滑动

slideToggle() 切换滑动

这三个通常会设置speed的值，就是设置动画下拉上拉的时间。

    <section>
        <button class="slidedown">下拉</button>
        <button class="slideup">上拉</button>
        <button class="slidetoggle">切换</button>
        <div class="div3">div3</div>
    </section>

            $(".slidedown").click(function () {
                $(".div3").stop().slideDown(2000);
            });
            $(".slideup").click(function () {
                $(".div3").stop().slideUp(2000);
            });
            $(".slidetoggle").click(function () {
                $(".div3").stop().slideToggle(2000);
            });

3. 淡入、淡出、切换效果、设置透明度

fadeIn()  淡入效果

fadeOut()  淡出效果

fadeToggle() 切换效果

fadeTo(speed，opacity)    设置透明度：这里多了一个opacity的参数，  speed 和opacity这俩参数必须写

常用的参数依然是speed

    <section>
        <button class="fadein">淡入</button>
        <button class="fadeout">淡出</button>
        <button class="fadetoggle">切换</button>
        <button class="fadeto">更改透明度</button>
        <div class="div2">div2</div>
    </section>

            $(".fadein").click(function () {
                $(".div2").stop().fadeIn(1000); // 1s完成淡入效果
            });
            $(".fadeout").click(function () {
                $(".div2").stop().fadeOut(1000);
            });
            $(".fadetoggle").click(function () {
                $(".div2").stop().fadeToggle(1000);
            });
            // fadeTo()多了一个opacity的参数  speed 和opacity这俩参数必须写
            $(".fadeto").click(function () {
                $(".div2").stop().fadeTo(1000, 0.5); // 1s内透明度为一半
            });

4. 自定义效果 —— 动画效果

animate() 动画

多了一个params参数：一组包含作为动画属性和终值的样式属性和及其值的集合。

简单来说就是：用对象的形式存储数据

    <section>
        <button class="jquery-animate1">点击移动200</button>
        <button class="jquery-animate2">回原位</button>
        <div class="ja">动画移动</div>
    </section>

            $(".jquery-animate1").click(function () {
                $(".ja").stop().animate({
                    left: 200
                }, 500)
            })
            $(".jquery-animate2").click(function () {
                $(".ja").stop().animate({
                    left: 0
                }, 500)
            })

 

上面小案例的效果图哈。

 

效果实际应用 —— 高亮显示

当鼠标经过图片时，突出高亮显示。

效果如下：

核心：用fadeTo()方法设置元素透明度。

你万万想不到的是，我们只用写两行jQuery代码就能实现。

        $(function () {
            // 鼠标经过时，图片高亮显示
            $(".wrap li").mouseenter(function () {
                $(this).stop().fadeTo(100, 1).siblings("li").stop().fadeTo(100, 0.5);
            })
        })

结构、样式

    <style>
        body {
            background-color: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap ul {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .img {
            display: block;
            border: 0;
        }
    </style>

<div class="wrap">
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="images/01.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/02.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/03.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/04.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/05.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/06.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>

 

 

 

ok，今天就结束拉。

明天又是美好的一天，树叶都长大了。