精华内容
下载资源
问答
  • jQuery 动画效果
    千次阅读
    2022-03-31 09:38:29

    目录

    1.常见的动画效果

    2.显示隐藏效果

    显示语法规范:

    显示参数:

    隐藏语法规范:

    隐藏参数:

    3.滑动效果

    停止排队:

    4.自定义动画animate

    参数:

    小案例


    1.常见的动画效果

    jQuery给我们封装了很多动画效果,最为常见的如下:
     

    显示隐藏show()    hide()     toggle()
    滑动slideDown()   slideUp()   slideToggle()
    淡入淡出fadeIn()  fadeOut()  fadeToggle()  fadeTo()
    自定义动画animate()

    2.显示隐藏效果

    显示语法规范:

    show([speed,[easing],[fn]])
    

    显示参数:

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

    隐藏语法规范:

    hide([speed,[easing],[fn]])
    

    隐藏参数:

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

    3.滑动效果

    滑动效果的语法规范和参数与显示隐藏效果相同,这里我们用一个案例加以说明:

     给我们之前写过的下拉菜单加上滑动效果:

    // 鼠标经过
    $(".nav>li").mouseover(function() {
    //$(this) jQuery 当前元素  this不要加引号
    // show() 显示元素  hide() 隐藏元素
        $(this).children("ul").slideDown(200);
    });
    // 鼠标离开
    $(".nav>li").mouseout(function() {
        $(this).children("ul").slideUp(200);
    });

    但是jQuery觉得这样写太复杂了,于是有了事件切换:

      // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
    $(".nav>li").hover(function() {
          $(this).children("ul").slideDown(200);
    }, function() {
          $(this).children("ul").slideUp(200);
    });

    hover里面第一个函数是鼠标经过时触发的,第二个是鼠标离开时触发的,他和前面的代码有相同的效果,但是jQuery觉得这样还是太复杂,这下只需要一个函数就可以实现效果:

     // 2. 事件切换 hover  如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
    $(".nav>li").hover(function() {
          $(this).children("ul").slideToggle();
    });

    但是当我们鼠标快速经过离开时,每次都会触发,就造成多个动画或者效果排队执行

    停止排队:

    stop()
    
    1. stop()方法用于停止动画或效果
    2. 注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画

    修改一下我们上例的代码:

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

    4.自定义动画animate

    fadeIn(params,[speed],[easing],[fn]])
    

    参数:

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

    小案例

    实现效果:

     示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <style>
            div {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            $(function() {
                $('div').click(function() {
                    $(this).animate({
                        left:400,
                        width:500
                    },500);
                })
            });
        </script>
    </body>
    </html>

    更多相关内容
  • jQuery动画效果

    千次阅读 2019-01-19 14:57:07
    show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为“none”。 1.1 hide() 和 show() 我们可以使用 hide() 和 show() 方法来隐藏和显示 ...

    1. 隐藏和显示

    show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为“none”。

    1.1 hide() 和 show()
    我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;">
              我是一个div标签</div>
        <button class="show">显示</button>
        <button class="hide">隐藏</button>
        <script>
            // 显示元素
            $(".show").click(function () {
                $("div").show();
            });
            // 隐藏元素
            $(".hide").click(function () {
                $("div").hide();
            });
        </script>
    </body>
    

    hide() 和 show() 分别可以携带两个可选参数,一个是speed参数另外一个是callback参数。

    在这里插入图片描述
    下面的例子演示了带有 speed 参数的 hide() 方法:

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;">
        我是一个div标签</div>
        <button class="show">显示效果</button>
        <button class="hide">隐藏效果</button>
        <script>
            // 动画显示元素
            $(".show").click(function () {
                $("div").show(1000, function () {
                    console.log("div动画显示完成");
                });
            });
            // 动画隐藏元素
            $(".hide").click(function () {
                $("div").hide(1000, function () {
                    console.log("div动画隐藏完成");
                });
            });
        </script>
    </body>
    

    1.2 toggle()方法
    我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    toggle() 可以携带两个可选参数,一个是speed参数另外一个是callback参数,两个参数的作用和show()方法一样。

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;">
        我是一个div标签</div>
        <button class="toggle">显示隐藏切换效果</button>
        <script>
            // 切换显示或隐藏元素
            $(".toggle").click(function () {
                $("div").toggle(1000, function () {
                    console.log("切换完毕");
                });
            });
        </script>
    </body>
    

    2.淡入和淡出

    fadeIn()方法和fadeOut()方法与show方法不相同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(“display: none”)。fadeIn()方法则恰好相反。

    加粗样式2.1 fadeIn()和fadeOut()
    fadeIn() 用于淡入已隐藏的元素,fadeOut() 方法用于淡出可见元素。

    fadeIn() 和 fadeOut() 分别可以携带两个可选参数,一个是speed参数另外一个是callback参数,两个参数的作用和show()方法一样。

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;">
        我是一个div标签</div>
        <button class="fade-in">淡入效果</button>
        <button class="fade-out">淡出效果</button>
        <script>
            $(".fade-in").click(function () {
                $("div").fadeIn(1000, function () {
                    console.log("淡入动画完成");
                });
            });
            $(".fade-out").click(function () {
                $("div").fadeOut(1000, function () {
                    console.log("淡出动画完成")
                });
            })
        </script>
    </body>
    

    2.2 fadeToggle() 方法
    fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    fadeToggle() 可以携带两个可选参数,一个是speed参数另外一个是callback参数,两个参数的作用和show()方法一样。

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;">
        我是一个div标签</div>
        <button class="toggle">淡入淡出切换效果</button>
        <script>
            $(".toggle").click(function () {
                $("div").fadeToggle(1000, function () {
                    console.log("淡入淡出切换动画完成");
                });
            });
        </script>
    </body>
    

    2.3 fadeTo() 方法
    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间),语法:$(selector).fadeTo(speed, opacity, callback);。

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

    下面的例子演示了带有不同参数的 fadeTo() 方法:

    <body> 
        <div style="width: 200px; height: 200px; background-color: 
                           yellow; opacity:0;"></div>
        <button class="fade-to">给定的不透明度</button>
        <script>
            $(".fade-to").click(function () {
                $("div").fadeTo(500, 0.25, function () {
                    console.log("透明度达到0.25");
                });
                $("div").fadeTo(1000, 0.5, function () {
                    console.log("透明度达到0.5");
                });
                $("div").fadeTo(1000, 0.75, function () {
                    console.log("透明度达到0.75");
                });
                $("div").fadeTo(500, 1.0, function () {
                    console.log("透明度达到1.0");
                });
            });
        </script>
    </body>
    

    3. 展开和收起

    slideDown()方法和slideUp()方法只改变元素的高度,slideUp()方法会在指定的一段时间内降低元素的高度,直到元素完全消失(“display: none”)。slideDown()方法则恰好相反。

    3.1 slideDown()和slideUp()
    slideDown() 方法用于向下滑动元素,slideUp() 方法用于向上滑动元素。

    slideDown() 和 slideUp() 分别可以携带两个可选参数,一个是speed参数另外一个是callback参数,两个参数的作用和show()方法一样。

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow;"></div>
        <button class="slideUp">向上滑动</button>
        <button class="slideDown">向下滑动</button>
        <script>
            $(".slideUp").click(function () {
                $("div").slideUp(1000, function () {
                    console.log("向上滑动完成");
                });
            });
            $(".slideDown").click(function () {
                $("div").slideDown(1000, function () {
                    console.log("向下滑动完成");
                });
            });
        </script>
    </body>
    

    3.2 slideToggle() 方法
    slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    如果元素向下滑动,则 slideToggle() 可向上滑动它们;如果元素向上滑动,则 slideToggle() 可向下滑动它们。

    slideToggle() 可以携带两个可选参数,一个是speed参数另外一个是callback参数,两个参数的作用和show()方法一样。

    <body>
        <div style="width: 200px; height: 200px; background-color: yellow"></div>
        <button class="toggle">向上向下滑动切换</button>
        <script>
            $(".toggle").click(function () {
                $("div").slideToggle(1000, function () {
                    console.log("切换完成");
                });
            });
        </script>
    </body>
    

    4. 自定义动画

    前面已经讲了多种类型的动画,如果这些动画还无法满足用户的需求,那么就需要对动画有更多的控制,需要采取一些高级的自定义动画来解决这些问题。在jQuery中,我们可以使用animate()方法来自定义动画。

    4.1 animate() 方法
    animate() 方法用于创建自定义动画的函数。

    语法:$(selector).animate({params}, speed, easing, callback);

    在这里插入图片描述
    自定义动画实例:

    <body>
        <div style="width: 200px; height: 200px; opacity: 0.2; 
                          background-color: gold; position: relative;"></div>
        <button class="animate">自定义动画</button>
        <script>
            $(".animate").click(function () {
                $("div").animation({
                    // 注意: margin-top也可写成驼峰式marginTop
                    "margin-top": "100px",
                    "opacity": "1.0",
                    "width": "300px",
                    "height": "300px",
                    // 注意:如果进行位置操作,则需要设置元素定位属性值:
                                               relative、fixed或absolute
                    "left": "100px"
                }, 3000, function () {
                    console.log("自定义动画结束");
                });
            });
        </script>
    </body>
    

    4.2 animate() 使用队列功能
    jQuery 提供针对动画的队列功能,我们可以编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

    <body>
        <div class="wrap" style="width: 200px; height: 200px; 
                                     background-color: gold;"></div>
        <button class="animate">使用队列功能</button>
        <script>
            $(".animate").click(function () {
                // 盒子移动到右上角
                $("#box").animate({
                     "top" : "10px",
                     "left" : "450px"
                }, 1000);
                // 盒子移动到右下角
                $("#box").animate({
                     "top" : "450px",
                     "left" : "450px"
                }, 1000);
                // 盒子移动到左下角
                $("#box").animate({
                     "top" : "450px",
                     "left" : "10px"
                }, 1000);
                // 盒子移动到左上角
                $("#box").animate({
                     "top" : "10px",
                     "left" : "10px"
                }, 1000);
            });
        </script>
    </body>
    

    4.3 jQuery插件
    jQuery动画中并不支持色彩动画(例如背景颜色,字体颜色),如果想要生成颜色动画,那么我们可以使用 jquery.color.js 插件来帮我们实现。

    <body>
        <div style="width: 200px; height: 200px;
                 background-color: gold; position: relative;">我是一个DIV</div>
        <button class="animate">自定义动画</button>
        <script>
            $(".animate").click(function () {
                $("div").animate({
                    "margin-top": "100px",
                    "width": "300px",
                    "height": "300px",
                    "color": "red",
                    "background-color" : "blue",
                    "left": "100px"
                }, 3000);
            });
        </script>
    </body>
    

    5. 停止动画

    很多时候需要停止匹配元素正在进行的动画,那么我们可以使用stop()方法来停止动画。

    语法:$(selector).stop(stopAll, goToEnd);

    在这里插入图片描述
    停止动画示例:

    <body>
        <div style="width: 100px;height: 100px;background-color:red;
                                     position: relative;"></div>
        <button id="btn" style="float: right;">停止动画</button>
        <script>
            $("div").click(function () {
                $(this).animate({"left": "+=300px"}, 3000);
                $(this).animate({"top": "+=300px"}, 3000);
                $(this).animate({"left": "-=300px"}, 3000);
                $(this).animate({"top": "-=300px"}, 3000);
            });
            $("#btn").click(function () {
                // 表示立即停止全部动画,原地停止
                $("div").stop(true, false);
            });
        </script>
    </body>
    
    展开全文
  • 主要为大家介绍了jQuery动画效果实现图片无缝连续滚动,实现类似连续不间断的滚动广告位,感兴趣的小伙伴们可以参考一下
  • 主要介绍了jQuery动画效果图片轮播特效,图片可以进行左右轮播,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了jQuery动画效果相关方法。分享给大家供大家参考,具体如下: 1、show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒。也可以为slow”,”normal”,...
  • jQuery动画垂直折叠导航效果
  • 本次学习分为两个文件的测试,第一个是基本动画,第二个是滑动和透明动画效果,分别如下
  • 本文给大家分享一段关于jquery实现的动画效果,代码简单易懂,非常不错,感兴趣的朋友参考下
  • 分享了一份jquery动画效果学习笔记,针对jquery动画效果进行细致解析,对淡入淡出效果、滑动效果进行原理讲解,想要学好jquery动画效果,就耐心阅读本文,相信大家会有意想不到的收获。
  • JQuery动画效果多功能菜单是一款基于jQuery+CSS3实现的鼠标响应式由内向外渐变显示的jQuery多功能导航菜单。 鼠标经过前:
  • 下面小编就为大家带来一篇通过jquery实现页面的动画效果(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jQuery动画效果大全

    2020-10-21 03:44:40
    本篇文章主要介绍了jQuery动画效果,详细的介绍了各种动画特效的用法,有需要的可以了解一下。
  • CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。 代码如下:$(‘#shang’).click(function(){$(‘html,...
  • 来自德国的一款漂亮的焦点图特效,动态效果较多
  • JQuery动画效果多功能菜单是一款基于jQuery CSS3实现的鼠标响应式由内向外渐变显示的jQuery多功能导航菜单。 鼠标经过前:   鼠标经过时:
  • jQuery动画上下滑动效果在网页中的应用还是比较广泛的,其实很简单通过slideUp slideDown方法便可轻松实现,具体如下,喜欢的朋友可以参考下,希望对大家学习jquery有所帮助
  • NULL 博文链接:https://guoqiantong.iteye.com/blog/1747019
  • jQuery动画效果大全

    万次阅读 多人点赞 2017-12-20 04:07:07
    一、show()方法和hide()方法 1.show()与hide() show():根据hide()方法记住的display属性值来显示元素。...单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素
    一、show()方法和hide()方法
    1.show()与hide()
    show():根据hide()方法记住的display属性值来显示元素。
    hide()   : 将该元素的display样式改为 "none"。
    2.参数让元素动起来:
    单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素慢慢显示/消失,则可以为show()/hide()方法指定一个速度参数.
    参数:slow,normal,fast,数值(以毫秒为单位)
    $("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
    $("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
    $("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
    $("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏
    注:对元素使用带参数的show()和hide()是从:高度,宽度,不透明度  三个属性同时进行操作的。
    例如:若对一个<div>(矩形)使用hide(600)。hide(600)会同时减少"矩形"的高度、宽度和不透明度,直到3个属性的值都为0,最后设置该元素的CSS规则为"display:none"。同理show(600)则会从该元素上到下增加“矩形”高度,左到右增大“矩形”的宽度,同时增加“矩形”的不透明度,直至矩形完全显示出来。

    二、fadeIn()方法和fadeOut()方法
    fadeIn()/fadeOut() 只改变元素的不透明度。
    fadeOut()   :会在指定的一段时间内降低元素的不透明度,直到元素完全消失("display:none")。
    fadeIn()      :与fadeOut()完全相反。
    例:
    $("#panel h5.head").toggle(function(){
         $(this).next("div.content").fadeOut();
    },function(){
         $(this).next("div.content").fadeIn();
    });

    三、slideUp()方法和slideDown()方法
    slideUp()/slideDown()只改变元素的高度。
    slideDown():如果一个元素的display属性值为"none",当调用slideDown()时,这个元素将由上至下延伸显示。
    slideUp()     :与slideDown()完全相反。
    例:
    $("#panel h5.head").toggle(function(){
         $(this).next("div.content").slideUp();
    },function(){
         $(this).next("div.content").slideDown();
    });
    效果如图:

    四、自定义动画方法animate()
    animate(params, speed ,callback);
    参数说明:
    (1)params: 一个包含样式属性及值的映射,比如{property1: "value1", property2: "value2", ····· }
    (2)speed    : 速度参数,可选。
    (3)callback:在动画完成时执行的函数,可选。
    1.自定义简单动画
    例:当点击id="panel"的<div>时,该div就会向右运动。
    <head>
    <style>
    #panel{
      position:relative;
      width:100px;
      height:100px;
      border:1px solid #0050D0;
    }
    </style>
    </head>
    <div id="panel">click me</div>
    <script>
    $(function(){
         $("#panel").click(function(){
              $(this).animate({left:"500px"},3000);
         });
    });
    </script>
    2.累加、累减动画
    将上例jQuery代码改为   (在500px之前加上"+="或"-=",即表示在当前位置累加或者类减)
    $(function(){
         $("#panel").click(function(){
              $(this).animate({left:"+=500px"},3000);
         });
    });
    3.多重动画
    (1)同时执行多个动画
    例:元素向右滑动的同时,高度也在增加。
    $(function(){
         $("#panel").click(function(){
              $(this).animate({left:"500px",height:"200px"},3000);
         });
    });
    (2)按顺序执行多个动画
    例:元素先向右滑动,然后再增加它的高度。
    $(function(){
         $("#panel").click(function(){
              $(this).animate({left:"500px"},3000);
              $(this).animate({height:"200px"},3000);
              //或者改写成 $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
         });
    });
    注:像这样,动画效果的执行具有先后顺序,称为"动画队列"。
    4.综合动画
    $(function(){
         $("#panel").css("opacity","0.5"); //设置不透明度
         $("#panel").click(function(){
              $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
                     .animate({top:"200px"},3000)
                     .fadeOut("slow");
         });
    });
    5.动画回调函数

    代码如下
         $("#panel").click(function(){
              $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
                     .animate({top:"200px"},3000,function(){
                             $(this).css("border","5px solid blue");
                     })
         });

    五、停止动画和判断是否处于动画状态
    1.停止元素的动画
    stop([clearQueue] [, gotoEnd])   :停止动画。
    参数clearQueue,gotoEnd都是可选参数,为Boolean值(ture或flase)。
    clearQueue代表是否清空未执行完的动画队列。
    gotoEnd代表是否直接将正在执行的动画跳转到末状态。
    2.判断元素是否处于动画状态

    六、其他动画方法
    1.toggle(speed,[callback])     :切换元素可见状态。如果元素是可见的,则切换为隐藏的;反之亦然。
    2.slideToggle(speed,[callback]) :通过高度变化来切换元素的可见性。
    3.fadeTo(speed, opacity, [callback]) :把元素的不透明度以渐进方式调整到指定的值。

    1.toggle(speed,[callback])
    $("#panel h5.head").click(function(){
         $(this).next("div.content").toggle();
    });
    2.slideToggle(speed,[callback])
    $("#panel h5.head").click(function(){
         $(this).next("div.content").slideToggle();
    });
    3.fadeTo(speed, opacity, [callback])
    $("#panel h5.head").click(function(){
         $(this).next("div.content").fadeTo(600,0.2);
    });
    七、动画方法概括

    展开全文
  • 16jQuery动画效果.docx

    2020-05-02 23:04:41
    开发工具与关键技术:Visual Studio jQuery 动画效果 jQuery动画效果相关知识点
  • .jQuery动画效果

    2013-04-01 10:54:30
    .jQuery动画效果
  • jquery动画效果

    2013-10-15 22:01:37
    描述了jquery的几种动画效果,几种常用的动画效果,渐隐渐显的效果等
  • jQuery学习笔记(三)jQuery动画效果

    千次阅读 多人点赞 2018-09-25 11:59:26
    效果:让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意: 1. 括号中可以加动画时长(slow normal fast 毫秒数)任一个; 2. fast=200 normal=400 slow=600 3. 默认不做动画 演示...

    1、对角线动画

    效果:让元素在规定时间里沿着左上角来回显示和隐藏
    jq对象.show()    hide()    toggle()
    注意:
    1.	括号中可以加动画时长(slow normal fast 毫秒数)任一个;
    2.	fast=200    normal=400    slow=600
    3.	默认不做动画
    

    演示:

    html代码:

    <body>
    <input type="button" value="显示" />
    <input type="button" value="隐藏" />
    <input type="button" value="切换" />
    <div class="box">
        <img src="../img/one.gif" />
    </div>
    </body>

    jquery代码:

        <script src="../js/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                var inputs = $("input");
    
                // 显示
                inputs.eq(0).click(function () {
                    $(".box").show("slow");   // slow normal fast 1000
                });
    
                // 隐藏
                inputs.eq(1).click(function () {
                    $(".box").hide();
                });
    
                // 切换
                inputs.eq(2).click(function () {
                    $(".box").toggle(1000);
                });
            });
        </script>

    jQuery

    2、滑动动画

    效果:让元素在规定时间里下拉和上拉来回显示和隐藏
    jq对象.slideDown()    slideUp()    slideToggle()
    注意:如果没有参数,默认以normal(400)的速度做动画
    

    演示:

    html代码:同上

    jQuery代码:

     $(function () {
            var inputs = $("input");
    
            // 显示
            inputs.eq(0).click(function () {
                $(".box").slideDown("slow");   // slow normal fast 1000
            });
    
            // 隐藏
            inputs.eq(1).click(function () {
                $(".box").slideUp();
            });
    
            // 切换
            inputs.eq(2).click(function () {
                $(".box").slideToggle(1000);
            });
        });
    

     

    3、淡入谈出动画

    效果:让元素在规定时间里不断改变透明度直到显示和隐藏
    jq对象.fadeIn()    fadeOut()    fadeToggle()
    注意:如果没有参数,默认以normal(400)的速度做动画
    

    演示:

    html代码:同上

    jQuery代码:

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            var inputs = $("input");
    
            // 显示
            inputs.eq(0).click(function () {
                $(".box").fadeIn("slow");   // slow normal fast 1000
            });
    
            // 隐藏
            inputs.eq(1).click(function () {
                $(".box").fadeOut();
            });
    
            // 切换
            inputs.eq(2).click(function () {
                $(".box").fadeToggle(1000);
            });
        });
    </script>
    

     

    4、透明度动画

    效果:让元素在规定时间里改变一定的透明度
    jq对象.fadeTo(时间,透明度)		透明度取值0-1
    可以准确的设置透明度,而且透明度最终会停留在标签身上。
    注意:只是降低盒子的透明度,不是隐藏盒子
    

    演示:

    html代码:

    <body>
        <input type="button" value="改变透明度" />
        <input type="button" value="还原透明度" />
        <div class="box">
            <img src="../img/one.gif"/>
        </div>
    </body>
    

    jQuery代码:

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            var inputs = $("input");
    
            // 改变透明度
            inputs.eq(0).click(function () {
                $(".box").fadeTo(1000, 0);
            });
    
            // 还原透明度
            inputs.eq(1).click(function () {
                $(".box").fadeTo(1000, 1);
            });
    
        });
    </script>
    

     

    5、案例

    5.1、表格隔行变色

    html代码:

    <body>
        <table id="table" border="1" width="100%" align="center" style="text-align: center;">
            <tr>
                <td colspan="5" align="left">
                    <input id="uncheckBtn" type="button" value="全不选" />
                    <input id="reverseBtn" type="button" value="反选" />
                </td>
    
            </tr>
            <tr>
                <th>全选<input id="all" type="checkbox" /></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
        </table>
    </body>
    

    jquery代码:

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 1. 获取 tr 标签
            $("tr:gt(1):even").css("backgroundColor", "yellow");
            $("tr:gt(1):odd").css("backgroundColor", "skyblue");
        });
    </script>
    

    5.2、复选框全选全不选

    html代码:同上

    jquery代码:

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
    
            // 需求1 :全选
            $("#all").click(function () {
                // 1. 获取 all 标签的 checked 状态  (prop 方法)
                var checked = $("#all").prop("checked");
                // 2. 得到所有的 itemSelect 选项框, 状态与 checked 保持一致
                $(".itemSelect").prop("checked", checked);
            });
    
            // 需求2 : 全不选
            $("#uncheckBtn").click(function () {
                $(".itemSelect").prop("checked", false);
                $("#all").prop("checked", false);
            });
    
            // 需求3 : 反选
            $("#reverseBtn").click(function () {
                $(".itemSelect").click();
    
                // 1. 获取 itemSelect 的个数
                var len1 = $(".itemSelect").length;
                // 2. 获取 itemSelect 的被选中的个数
                var len2 = $(".itemSelect:checked").length;
    
                // alert(len1 + " : " + len2);
                // 3. 判断
                if (len1 == len2) {
                    $("#all").prop("checked", true);
                } else {
                    $("#all").prop("checked", false);
                }
            });
        });
    </script>
    

     

    5.3、QQ表情添加案例

    说明:

    让被点击的当前图片对象实现克隆, 然后拼接到类名word标签之后

     

    html代码:

    !DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>QQ表情选择</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;}
            .emoji{
                margin:50px;
            }
            ul{
                overflow: hidden;
            }
            li{
                float: left;
                width: 48px;
                height: 48px;
                cursor: pointer;
            }
            .emoji img{ 
                cursor: pointer; 
            }
        </style>
    </head>
    <body>
    <div class="emoji">
        <ul>
            <li><img src="../img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="../img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>请发言:</strong>
            <img src="../img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
    </body>
    </html>
    

    jquery代码:

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 1. 给所有图片绑定事件
            $("img").click(function () {
                // 2. 一旦图片被点击, 需要将当前图片克隆到类名为 word 标签之后.
                // $("img") 获取的是所有的 img 标签.
                // $("img").clone().appendTo(".word");
    
                // 原因: clone() 和 appendTo 方法是 jquery 提供的, this 是 JS 对象.
                // this.clone().appendTo(".word");
                $(this).clone().appendTo(".word");
            });
        });
    </script>
    

     

    展开全文
  • jQuery动画效果悬浮菜单是一款基于jQuery实现的带有动画效果显示的图标悬浮菜单。
  • jQuery动画效果淡入浅出想必大家都有见到过吧,其实很很简单,通过fadeIn fadeOut方法便可轻松实现,具体如下,喜欢的朋友可以参考下,希望对大家有所帮助
  • jQuery动画效果——淡入淡出

    千次阅读 2018-12-12 17:22:07
    本关任务:掌握jQuery常见的动画效果——淡入淡出。效果图如下: 相关知识 为了完成本关任务,你需要掌握:1.fadeIn(),2.fadeOut(), 3.fadeToggle(), 4.fadeTo() 5.delay()。 fadeIn(),fadeOut() 和 ...
  • jquery+css3立体式旋转banner焦点图动画效果
  • jQuery动画效果插件easing的使用方法

    千次阅读 2019-01-30 22:27:30
    我们都知道 jQuery自定义动画的...下面我给大家介绍jquery动画效果插件easing cdn:https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js 引入之后,easing参数可选的值就有以下32种: 1.linear 2.swi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,423
精华内容 26,169
关键字:

jquery动画效果