前端开发之jQuery效果篇

Posted schut

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发之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 / fadeOutfadeTofadeToggle

       $(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效果篇的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

前端之JQuery

常用的几个JQuery代码片段

前端 之 jQuery: 简介, 选择器, 动画效果, 属性操作;

12个用得着的 JQuery 代码片段

前端 之 第三方插件, 框架 总结篇: