jquery的动画方法

最新推荐文章于 2024-04-04 00:19:13 发布
最新推荐文章于 2024-04-04 00:19:13 发布
阅读量1.7k 收藏
点赞数
分类专栏： jquery 文章标签： jquery 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47720236/article/details/123444579
版权

动画效果

改变元素的显示和隐藏
DOM : 运动插件的封装
move(‘width’,‘500’,1000) 动画效果
show() 显示 通过设置display属性改变
hide() 隐藏 通过设置display属性改变
toggle() 切换
同时改变元素的宽高和透明度来隐藏和显示元素
参数1：时间
参数2 ：函数
参数3： 运动速度
fadeIn() 淡入 让元素显示
fadeOut() 淡出 让元素隐藏
通过元素的透明度让元素显示和隐藏,同时也会设置元素的display属性
fadeTo(3000,0.5,fn) 设置元素变化透明度的目标值 0-1
fadeToggle() 切换 将元素的透明度从0切换到1 / 从1-0
slideDown() 卷入
slideUp() 卷出
slideToggle() 切换

animate()

集合了以上的所有效果
通过改变元素的属性来达到动画效果
参数1: 属性对象
参数2：时间
参数3: 速度
参数4：回调函数

<!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="js/jquery.js"></script>

    <style>

        div{

            width: 100px;

            height: 100px;

            background: hotpink;

            position: absolute;

            top: 0;

            left: 0;

        }

        button{

            position: absolute;

            top:100px;

        }

    </style>

</head>

<body>

    <div></div>

    <button>点我</button>

​

    <script>

        // animate()

​

        // div 宽度  定位：0 0  -》 100 100

        // $('button').click(function(){

        //     $('div').animate({

        //         'width':500,

        //         'top':100,

        //         'left':100

        //     },1000,'linear',function(){

        //         console.log('over');

        //     })

        // })

​

​

        // 在当前属性的值上 添加100px  直接在属性值上去进行运算 += 100

​

        // $('button').click(function(){

        //     $('div').animate({

        //         'width':'+=100',

        //         'top':'+=100',

        //         'left':'+=100'

        //     },1000,'linear',function(){

        //         console.log('over');

        //     })

        // })

​

​

        // 回调函数：函数中，当函数的功能执行完成后，然后执行传递的参数（函数）

​

        // 递归： 在函数内容 只有执行完函数中的代码 才能结束函数

​

        // 事情1 干完 -》 执行事件2 -》 处理事件3

​

​

        // 处理事件1中 得到的结果是错误的   promise  回调地狱

        $('button').click(function(){

            $('div').animate({

                'width':500,

                'top':100,

                'left':100

            },1000,'linear',function(){

                $('button').animate({

                    'width':100,

                    'height':100,

                },2000,'swing',function(){

​

                })

            })

        })

​

        // var one = new Promise();

​

        // one.then(function(){

        //     // 成功后的要执行的事件

        // },function(){

        //     // 

        // })

​

        // 面试重点 ： promise

       

    </script>

</body>

</html>

stop() 停止动画
finish() 完成动画
delay() 延迟动画

<!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="js/jquery.js"></script>

    <style>

        div{

            width: 100px;

            height: 100px;

            background: hotpink;

            position: absolute;

            top: 50px;

            left: 0;

        }

        

    </style>

</head>

<body>

    <div></div>

    <button>stop</button>

    <button>finish</button>

    <button>delay</button>

​

    <script>

        $('div').click(function(){

            $(this).animate({

                'opacity':0.2,

                // 'background':'red',

                'top':200,

            },2000).delay(2000).animate({

                'width':500,

                'height':500

            })

        })

​

        $('button:eq(0)').click(function(){

            // stop  停止当前正在进行的动画 直接完成最后一个动画

            // 传参true  停止当前所有的动画

            // true true 直接完成当前动画 然后停止后面所有的动画

            $('div').stop(true,true);

        })

        $('button:eq(1)').click(function(){

            // 直接到达所有动画的目标 但是没有执行的过程

            $('div').finish();

        })

​

        // 将需要延迟的动画前调用delay

        $('button:eq(2)').click(function(){

            // $('div').;

        })

       

    </script>

</body>

</html>
风澜.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动画jquery动画
07-08
jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画
jQuery动画的 方法
weixin_42043592的博客
04-24 298
一 , jquery动画 1,显示隐藏 显示：show() 隐藏：hide() 相当于对display：none;多了一个动画效果 show(500) 500毫秒显示出来 toggle:切换显示与隐藏状态 toggle(null/speed).easing,fn) null: 空, 没有参数 speed：'slow|normal|fast'|2000 easing:指定动画效果，...
jQuery中的动画，web前端开发学习教程
最新发布
2401_84092423的博客
04-04 857
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
jQuery的动画方法
weixin_58139900的博客
11-21 431
目录 三组动画 show([speed,[easing],[fn]])/hide([speed,[easing],[fn]])/toggle([speed,[easing],[fn]]) 显示 / 隐藏 / 切换 slideDown() / slideUp() / slideToggle() 展开/收起/切换 fadeIn() / fadeOut() / fadeToggle() 淡入/淡入/切换 阻止冒泡及默认行为 自定义动画 animate(params,[speed],[e...
jQuery动画方法
AdrianRD的博客
10-20 319
隐藏与显示 hide(speed,callback) show(speed,callback) 隐藏和显示 - speed 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。 - callback 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。示例：$("button").click(function(){ $("p
详解jQuery中基本的动画方法
10-20
通过jQuery中基本的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验，本文主要对jQuery中基本的动画方法进行详细介绍，需要的朋友一起来看下吧
jQuery动画animate方法使用介绍
10-27
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象，下面为大家详细介绍下animate方法的具体使用，感兴趣的朋友可以了解下哈
jquery动画背景图片
06-10
在这个例子中，我们将使用js调用图片作为网页背景图片。当然不仅仅是简单的静态图片，还可以让图片从左向右滚动起来，实现图片动画效果。例如让云彩从左向右飘动起来的效果
jQuery 动画基础教程
12-10
注意此代码需要用到jquery的js文件，才可以用所以大家可以先下载一个jquery文件，注意调用路径。代码： 代码如下:<...jQuery动画基础</title> <script type=”text/javascript” src=”..
jQuery动画1
weixin_44621746的博客
05-07 296
jQuery动画1 一、动画基础的隐藏（hide）与显示（show） 1、在jQuery中把元素隐藏起来的方法是.hide()方法。 2、我们让页面上的元素不可见的方法有两种，分别是： （1）可以通过在css中设置display的属性为none，这样的直接修改是静态布局。 （2）但是在代码执行时，我们是需要通过js来控制元素的style（样式...
jQuery动画相关的方法
MD_ASCE的博客
10-22 209
jQuery动画相关的方法:     隐藏和显示的方法         A:向左上方收缩折叠效果         show();         hide();             .hide();  css样式 display:none;             .show();  css样式 display:inline;  display:block             时间:毫秒数...
jQuery动画的几种方法
weixin_46081459的博客
11-07 6465
动画 显示与隐藏 show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下： $element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]); speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。 easing:用来指定切换效果，默认是"swing",可用参数"inear". fn:在动画完成时执行的函数，每个元素执行一次。 滑动式动画 sli
jQuery动画方法总结
peichuangaoling的专栏
08-25 394
jQuery动画总结 show()和hide() 显示和隐藏，同时修改多个
40个超酷的jQuery动画效果教程
thewebcode
07-07 526
自从出现，jQuery就在web领域就引起了轰动，现在它已经成为Web动画效果的最佳解决方案之一。jQuery提供了良好的交叉浏览器支持，并且轻便易用。现在，jQuery在定义和控制小型的Web动画诸多方面已经展示其强大的功能。 除非最近的CSS3完全成熟，并被主流的浏览器所支持，否则jQuery将继续保持目前的流行趋势。它还将继续在导航界面，滑动效果/sliders，其它图像呈...
jquery动画
浪漫韫秋
06-28 471
jquery效果-动画 jquery animate()方法允许您创建自定义的动画。 jquery动画-animate()方法 jquery animate()方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback); 必须的params参数定义形成动画的CSS属性。 可选的speed参数规定效果的时长，它可以取以...
jQuery动画
m0_57774967的博客
07-17 576
参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”参数1speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值“slow”，“fast”，“normal”它定义了产生动画的CSS属性，可以同时设置多个此类属性。...
jquery 常用方法 -- 动画篇
kxmdjqq的博客
08-27 632
如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。animate 可以传递一个对象参数，可以拿到动画执行状态一些通知，如实时显示谈出谈入的高度数值。get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1。get方法是获取dom对象，对应方法即 $().get().style()eq方法是获取jq对象，对应方法即 $().get().css()19、DOM元素的获取index（索引）方法。18、DOM元素的获取get方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值