jquery动画animate的方法

最新推荐文章于 2022-07-07 14:59:11 发布
最新推荐文章于 2022-07-07 14:59:11 发布
阅读量156 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46421045/article/details/106754036
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1{width: 100px; height: 100px; background-color: red;}
            #div2{width: 100px; height: 100px; background-color: blue;}
        </style>
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            /*
                animate方法 JQ官方的动画函数
                参数：
                    第一个参数：对象，传入要变化的样式和目的值
                    第二个参数：动画持续时间，如果不传入默认是400毫秒。
                    第三个参数：回调函数

                
            */
            $(function(){
                $("#div1").hover(function(){
                    // $("#div2").animate({
                    //     width: 300,
                    //     height: "300px",
                    //     opacity: 0.5
                    // }, 2000, function(){
                    //     $("#div1").html("移入成功");
                    // })

                    //先让宽变宽，然后再让高变高，最后透明度变化
                    $("#div2")
                    .animate({width: 300}, 2200)
                    .animate({height: 300}, 1700)
                    .animate({opacity: 0.5}, 800)
                    

                }, function(){
                    // $("#div2").animate({
                    //     width: 100,
                    //     height: "100px",
                    //     opacity: 1
                    // }, 2000, function(){
                    //     $("#div1").html("移出成功");
                    // })

                    $("#div2")
                    .animate({opacity: 1}, 2000)
                    .animate({height: 100}, 1500)
                    .animate({width: 100}, 1000)
                    
                    
                })
            })

        </script>
    </head>
    <body>
        <div id = 'div1'></div>
        <div id = 'div2'></div>
    </body>
</html>
Stirve unremitting
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery - animate()方法
AQ3219795118的博客
11-06 454
jQuery - animate()方法 jQuery提供了anirmate()方法完成自定义动画效果，该方法具有两种用法: 第一种用法 animate(properties,duration,callback) 参数 properties - 表示CSS的样式属性 duration - 表示动画执行的时长 callback - 表示动画执行完毕后的回调函数 <!DOCTYPE html> <html lang="en"> <head> &l
jQuery 效果 - animate() 方法
zengyonglan的博客
12-12 669
原文链接 实例 改变 “div” 元素的高度：$(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); 定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比
jQuery.animate() 函数详解
04-26 2928
nimate()函数用于执行一个基于css属性的自定义动画。 你可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。 例如：某个div元素的当前高度为100px，将其CSS height属性设为200px，animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画。 该函数属于jQuery对
jQuery动画方法animate()
晶谛-giserDev
08-30 847
在jQuery中，提供了专门用于实现动画效果的animate()方法，原型如下： animate: function( prop, speed, easing, callback ) 四个参数的含义如下 prop 必须的，代表动画中元素的最终属性值 speed 动画执行时间 easing 动画执行效果 callback 回调函数 例：移动盒子 $("div").eq(0).animate({left:800}, 8000); 例：停止动画 /** * 停止动画 * clearQueue 是
jQuery animate方法
Love.Hope.Faith
01-15 1126
如题。         使用jQuery animate的方法能够对某一个元素的css属性执行渐变效果。         执行语句：         $("元素（class或ID）").css({属性初始状态}).stop().animate({元素结束状态}, { duration: 持续时间 });        使用这个语句基本上可以实现很多效果。         例如，让元素从透明
jQuery动画animate方法使用介绍
10-27
`jQuery` 的 `animate` 方法是用于创建自定义动画的核心函数，它允许开发者精确控制页面元素的动画效果，包括但不限于位置、大小、颜色、透明度等样式属性的变化。`animate` 方法提供了极大的灵活性，使开发者能够...
JQuery动画animate的stop方法使用详解
10-25
JQuery的animate方法是...理解并熟练运用stop方法对于精细控制JQuery动画至关重要，这使得开发者能够创建更复杂、交互性更强的用户界面。在处理多个连续动画或者需要响应用户交互的场景时，stop方法的作用尤为突出。
jQuery中使用animate自定义动画的方法
10-22
主要介绍了jQuery中使用animate自定义动画的方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
js实现类似jquery里animate动画效果的方法
10-24
在JavaScript中，jQuery库提供了强大的`animate()`方法，使得开发者能够轻松创建平滑的动画效果。但是，如果我们不使用jQuery，而是直接用原生JavaScript，如何实现类似的效果呢？本篇将详细介绍如何通过JavaScript...
jquery使用animate方法实现控制元素移动
10-24
主要介绍了jquery使用animate方法实现控制元素移动,涉及jQuery中animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery animate()方法 动画详解（超简单易懂）
热门推荐
m0_62360527的博客
05-19 1万+
jquery animate 动画详解（超简单易懂） animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。
jQuery中animate()的方法
weixin_44774699的博客
07-07 4649
jQuery中animate()的方法
jq animate动画
weixin_43294560的博客
12-12 670
animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行 $(".div1").animate({"width":100,'top':400,'left':400},4000); 链式调用，执行完一个变化后再执行另一个变化 $(".div1").animate({'width':100},2000)...
jQuery中animate()动画方法
weixin_45846263的博客
05-21 754
自定义动画方法animate() animate(params,[speed],[easing],[fn]) 参数说明： （1）params： 一个包含样式属性及值的映射，比如{property1: “value1”, property2: “value2”, ····· } 要特别注意所有用于动画的属性必须是数字的，除非另有说明； 这些属性如果不是数字的将不能使用基本的jquery功能。比如常见的，borderwidth、margin、padding、 width、height、fontsize、left
玩转Jquery中的动画效果(animate方法)
weixin_39037804的博客
09-22 2734
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callba...
如何用jQuery的animate()方法创建动画？
qq_40859799的博客
08-02 818
今天，给大家讲讲用JavaScript的jQuery库创建动画，那么创建动画我们用到的是animate（）方法，其实方法比较简单，所以很少有人专门写这个东西，那么我今天就给刚入门的小白同学门讲一讲如何用该方法，看完一定自己动手实现一下哦！ animate（）可以同时操作多个属性，例子如下： (“button”).click(function()$(“div”).animate(left...
JQ animate动画
qq_43075798的博客
07-26 260
animate()是jq封装的一个方法，可以实现动画效果，拥有4个可设置的参数，基本语法如下： $('#jq对象').animate('参数1','参数2','参数3','参数4'); animate参数： /* 参数一：要改变的样式属性值，写成字典（键值对）的形式 参数二：动画持续的时间，单位为毫秒，一般不写单位 参数三：动画曲线，默认为‘swing’，缓冲运动，还可以...
jq 自定义动画animate
lujiayingwing的博客
10-25 483
点击打开链接             .box1{                 width: 200px;                 height: 200px;                 background: deeppink;             }             .box2{                 width: 200px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值