前端开发之jQuery效果篇

主要内容：

　　1、显示与隐藏效果

　　2、滑动效果

　　3、淡入与淡出效果

　　4、动画效果

　　5、弹出广告效果

一、显示与隐藏

　　显示与隐藏即 show() 和 hide() ，能够控制元素显示或隐藏。

　　实例：

<script type="text/javascript">
    var isShow = true;
    $('#btn').click(function () {
        if(isShow){
            $('.box').show(3000,function () {
                $('.box').text('盒子现身了');
                isShow = false;
                $('#btn').text('隐藏');
            })
        }
        else{
            $('.box').hide(2000,function () {
                $('.box').text('');
                isShow = true;
                $('#btn').text('显示');
            })
        }
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的效果</title>
    <style type="text/css">

        .box{
            width: 300px;
            height:200px;
            border:2px solid gold;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
//    $('#btn').click(function () {
//        $('.box').css('display','block');
//    });

    // jQuery提供了一些方法，如show(),hide() 控制元素显示或隐藏
    var isShow = true;
    $('#btn').click(function () {
        if(isShow){
            $('.box').show(3000,function () {
                $('.box').text('盒子现身了');
                isShow = false;
                $('#btn').text('隐藏');
            })
        }
        else{
            $('.box').hide(2000,function () {
                $('.box').text('');
                isShow = true;
                $('#btn').text('显示');
            })
        }
    })
</script>
</html>

View Code

二、滑动效果

　　有两种实现方式，即 slideDown()/slideUp() 和 slideToggle().

　　第一种方式：使用 slideDown() 和 slideUp().

　　实例：

<script type="text/javascript">
    $(document).ready(function () {
       $('#btn').hover(function () {
           $('#box').slideDown(2000,function () {
               $(this).text('大吉大利，今晚吃鸡...');
           });
       },function () {
           $('#box').slideUp(4000,function () {
               $(this).text('');
           });
           })
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide滑动效果</title>
    <style type="text/css">
        #box{
            width:300px;
            height:300px;
            border:2px solid greenyellow;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       $('#btn').hover(function () {
           $('#box').slideDown(2000,function () {
               $(this).text('大吉大利，今晚吃鸡...');
           });
       },function () {
           $('#box').slideUp(4000,function () {
               $(this).text('');
           });
           })
    })
</script>
</html>

View Code

　　第二种方式：使用 slideToggle() 。

　　实例：

<script type="text/javascript">
    $(document).ready(function () {
           isShow = true;
        $('#btn').click(function () {
            $('#box').slideToggle(3000,function () {
                if(isShow){
                   $('#btn').text('隐藏');
                   isShow = false;
                }
                else{
                    $('#btn').text('显示');
                    isShow = true;
                }
            });
        })
    })
</script>
</html>

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide滑动效果</title>
    <style type="text/css">
        #box{
            width:300px;
            height:300px;
            border:2px solid greenyellow;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        isShow = true;
        $('#btn').click(function () {
            $('#box').slideToggle(3000,function () {
                if(isShow){
                   $('#btn').text('隐藏');
                   isShow = false;
                }
                else{
                    $('#btn').text('显示');
                    isShow = true;
                }
            });
        })
    })
</script>

View Code

三、淡入和淡出效果

　　1、几对效果，fadeIn / fadeOut，fadeTo，fadeToggle。

       $(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

        fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

        fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
        $(selector).fadeToggle(speed,callback);

        fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。$(selector).fadeTo(speed,opacity,callback);
        必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

        fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

        可选的 callback 参数是该函数完成后所执行的函数名称。

　　2、fadeIn / fadeOut 实例（fadeTo表示最终效果，配合淡入淡出使用）：　　

<script type="text/javascript">
    $(document).ready(function () {
            // 当鼠标从元素上移开时，改变元素的显示状态
       $('#btn').mouseout(function(){
           $('#box').fadeIn(3000);  //  fadeIn() 用于淡入已隐藏的元素。
           //$('#box').fadeIn('slow');
           $('#box').fadeOut(1000); // 淡出
           $('#box').fadeTo(2000,0.3); // 最终状态
       });
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade淡入淡出</title>
    <style type="text/css">
        #box{
            width:300px;
            height:300px;
            border:2px solid #b3d7ff;
            display:none;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 当鼠标从元素上移开时，改变元素的显示状态
       $('#btn').mouseout(function(){
           $('#box').fadeIn(3000);  //  fadeIn() 用于淡入已隐藏的元素。
           // $('#box').fadeIn('slow');
           $('#box').fadeOut(1000); // 淡出
           $('#box').fadeTo(2000,0.3); // 最终状态
       });
    })
</script>
</html>

View Code

　　3、fadeToggle实例

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function(){
            $('#box').toggle(3000);
            $("#box").text("我会变身！");
            $("#box").fadeTo(2000,0.3);
        })
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade淡入淡出</title>
    <style type="text/css">
        #box{
            width:300px;
            height:300px;
            border:2px solid #b3d7ff;
            display:none;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">显示</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       $('#btn').click(function(){
            $('#box').toggle(3000);
            $("#box").text("我会变身！");
            $("#box").fadeTo(2000,0.3);
        })
    })
</script>
</html>

View Code

四、动画效果

　　关于动画效果，这里给大家介绍两种玩法。

　　玩法一：无延迟动画，即打开网页或点击接触选项等情况下，立即出现对应动画。

　　实例：　

script type="text/javascript">
    $(document).ready(function () {
       $('#start').click(function () {
           $('#box').animate({
               width:'300px',
               height:'300px',
           },10000)
       });
        $('#stop').click(function () {
            $('#box').stop()
        })
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate动画</title>
    <style type="text/css">
    #box{
        width:100px;
        height:100px;
        border:2px solid mediumspringgreen;
        position: absolute;
        font-size:14px;
        text-align: center;
        line-height: 100px;
    }
    </style>
</head>
<body>
    <button id="start">动画</button>
    <button id="stop">停止</button>
    <div id="box">
        hello,everyone!
    </div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       $('#start').click(function () {
           $('#box').animate({
               width:'300px',
               height:'300px',
           },10000)
       });
        $('#stop').click(function () {
            $('#box').stop()
        })
    })
</script>
</html>

View Code

　　玩法二：延迟播放动画，即 delay()。

　　实例：

<script type="text/javascript">
    $(document).ready(function () {
        $('#box').animate({
            left:'200px',
            top:'300px'
        }).delay(2000).animate({top:'400px'}); // delay()是指的延迟

    })
</script>

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate动画</title>
    <style type="text/css">
    #box{
        width:100px;
        height:100px;
        border:2px solid mediumspringgreen;
        position: absolute;
        font-size:14px;
        text-align: center;
        line-height: 100px;
    }
    </style>
</head>
<body>
    <button id="start">动画</button>
    <button id="stop">停止</button>
    <div id="box">
        hello,everyone!
    </div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#box').animate({
            left:'200px',
            top:'300px'

        }).delay(2000).animate({top:'400px'}); // delay()是指的延迟
    })
</script>
</html>

View Code

五、弹出广告效果

　　综合运用前几个方法，就可以得到弹出的广告效果。

　　实例：

    <script type="text/javascript">
        $(document).ready(function () {
            $('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
                $(this).fadeOut(1000);
            })
        })
    </script>

　　完整代码：　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出广告</title>
    <style type="text/css">
        #box{
            width:200px;
            height:200px;
            position:absolute;
            right:10px;
            bottom:0;
            display:none;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="../../lufei.jpg" style="width:80%; height:50%;"/>
    </div>
</body>
    <script src="../jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () {
                $(this).fadeOut(1000);
            })
        })
    </script>
</html>

View Code

前端开发之jQuery效果篇

猜你喜欢