hg888皇冠手机登录

www.hg888.comjquery动画效果学习笔记(8种功能)

八月 23rd, 2019  |  www.hg888.com

总结

jQuery中animate的二种用法与注意事项,jqueryanimate

一、animate语法结构

animate(params,speed,callback)

params:叁个包蕴样式属性及值的照射,比方{key1:value1,key2:value2}

speed:速度参数[可选]

callback:在动画实现时进行的函数[可选]

二、自定义简单动画

用贰个粗略例子来证明,达成单击某div在页面上横向飞舞的效力。

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

为了使成分动起来,要改成left属性。为了能影响因素top、right、bottom、left属性值必需申明成分的position。

www.hg888.com 1
演示效果

三、累加、累减动画

在前边的代码中,设置了{left:"100px"}其一特性作为参数,假使改写为{left:"+=25px"},效果如下

www.hg888.com 2
示范效果

四、多种动画

与此同一时候进行多个卡通

上边的例子是二个很简短的动画片。假若想同有的时候候实践多少个卡通,比方在要素向右滑动的同不平时间,放大成分中度。

代码如下:

$(this).animate({left:"+=25px",height:"+=20px"},1000)

www.hg888.com 3

事必躬亲效果

五、按顺序试行多个卡通

上例中,向右滑动与中度变大是同期发生的,假诺想让方块先向右滑动再变高,只需将代码拆分

如下:

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

像那样的动画片效果的施行有前后相继顺序,称为“动画队列”

www.hg888.com 4
演示效果

六、综合示范

单击方块,让她向右移动的同有时间狠抓,不光滑度从百分之五二十十一日增到百分百,之后上下运动,加宽,完毕后脱离。

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut('slow')
   })

为同一元素应用多种效果时能够经过链式形式对那些效应举行排队。

www.hg888.com 5
示范效果

七、动画回调函数

在上例中,倘使想在最终一步切换css样式(background:blue),并不是脱离,如若依据日常管理,相关代码如下:

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

然而,css()措施被提前调用。

www.hg888.com 6
演示效果

引起那个题目标因由是,css()艺术不会投入到动画队列中,而是马上实践。能够应用回调函数对非动画方法完毕排队。

科学的连带代码如下:

   $("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500,function(){
     $(this).css("border","5px solid blue")
    })
   })

www.hg888.com 7

躬体力行效果

值得注意的是,callback适用于jquery全数的卡通方法,举例slidDown(),show()等。

总结

上述便是有关jquery中animate的二种用法和注意事项,希望本文的内容对咱们的上学也许办事能带来一定的扶植,即使有疑点我们能够留言沟通。谢谢大家对帮客之家的支撑。

一、animate语法结构 animate(params,speed,callback)
params:贰个分包样式属性及值的映射,比方 {key1:…

自定义简单动画

用四个粗略例子来声明,达成单击某div在页面上横向飘动的意义。

<style>
    #cube{
        position:relative;/* 不加这句元素不能动 */
        width:30px;
        height:30px;
        background:red;
        cursor:pointer;
    }
</style>
<body>
    <div>
        <div id="cube"></div>
    </div>
    <script>
        $(function(){
            $("#cube").click(function(){
                $(this).animate({left:"100px"},2000)
            })
        })
    </script>

为了使成分动起来,要改成left属性。为了能影响因素top、right、bottom、left属性值必须表明成分的position。

www.hg888.com 8

演示效果

stop([clearQueue][,gotoEnd]) 八个都是可选参数,都以boolean类型
参数表明:

二、自定义简单动画

callback:在动画实现时施行的函数[可选]

让要素通过自然折射率变化,达到显示和藏身的效率

$(this).animate({left:"+=25px",height:"+=20px"},1000)

累加、累减动画

在前边的代码中,设置了{left:”100px”}那本性子作为参数,如若改写为{left:”+=25px”},效果如下

www.hg888.com 9

演示效果

诸有此类就把css方法参加到动画队列中了。

示范效果

params:三个包蕴样式属性及值的映照,比方{key1:value1,key2:value2}

                     speed:设置效率的进程(slow(600)normal(400)
fast(200) 时间(飞秒))
                     callback: 效果实践实现之后自动调用的回调函数

您大概感兴趣的小说:

  • jQuery animate
    easing使用方式图像和文字详解
  • jQuery中应用animate自定义动画的点子
  • 深切精通jquery自定义动画animate()
  • 享受有关jQuery中animate、slide、fade等卡通的连接触发、滞后反复推行的bug
  • 基于jquery
    animate操作css样式属性小结
  • jQuery插件animateSlide制作多点滑动幻灯片
  • jQuery中animate动画第4回点击事件没影响
  • jQuery的animate函数达成图像和文字切换动画效果
  • js完结类似jquery里animate动画效果的格局
  • jquery使用animate方法达成调控作而成分移动
  • jQuery达成立体式数字动态扩大(animate方法)
按梯次试行多少个卡通

上例中,向右滑动与中度变大是同不常候发生的,就算想让方块先向右滑动再变高,只需将代码拆分,如下:

$(this).animate({left:"+=25px"},500)
        .animate({height:"+=20px"},500)

像这么的卡通片效果的施行有前后相继顺序,称为“卡通队列

www.hg888.com 10

示范效果

clearQueue:代表是不是清空未实行完的卡通队列
gotoEnd :代表是还是不是将正在试行的卡通跳到末状态
因而四个综合的示范就可以弄明白stop()方法的这八个参数了:

callback:在动画实现时实践的函数[可选]

动画回调函数

在上例中,若是想在结尾一步切换css样式(background:blue),并非退出,假如依照平常管理,相关代码如下:

$("#cube").click(function(){
                $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
                .animate({top:"40px",width:"100px"},500)
                .css("border","5px solid blue")//改动这行
            })

而是,css()方法被提前调用。

www.hg888.com 11

示范效果

引起这么些难点的原因是,css()方法不会参预到动画队列中,而是立即实施。能够采用回调函数对非动画方法达成排队。正确的相关代码如下:

            $("#cube").click(function(){
                $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
                .animate({top:"40px",width:"100px"},500,function(){
                    $(this).css("border","5px solid blue")
                })
            })

www.hg888.com 12

演示效果

值得注意的是,callback适用于jquery全体的动画方法,比如slidDown(),show()等。

化解办法是剖断元素是还是不是正在处于动画状态,当不处于动画状态的时候,才为要素加多新的卡通片。
用法:

六、综合示范

多种动画

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
}) 
$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut('slow')
   })
並且试行四个卡通

地点的例子是二个不会细小略的动画片。假设想同有的时候间实施三个卡通,比方在要素向右滑动的还要,放大成分中度。代码如下:

$(this).animate({left:"+=25px",height:"+=20px"},1000)  

www.hg888.com 13

示范效果

简轻易单呈现和藏身方法

与此同不经常候施行多少个卡通

animate(params,speed,callback)

1、截止成分的卡通片

上例中,向右滑动与中度变大是同时发生的,借使想让方块先向右滑动再变高,只需将代码拆分

综述示范

单击方块,让她向右移动的还要提高,不反射率从百分之五二十三日增到百分之百,之后上下移动,加宽,达成后脱离。

$("#cube").click(function(){
                $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
                .animate({top:"40px",width:"100px"},500)
                .fadeOut('slow')
            })

为同一成分应用多种效果时能够透过链式方式对那么些效应实行排队。

www.hg888.com 14

示范效果

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
}) 

www.hg888.com 15
演示效果

speed:速度参数[可选]

  • slideUp(speed[,callback]) 向上滑动成分并最终遮盖
  • slideDown(speed[,callback]) 向下滑动成分并最终显示
  • slideToggle(speed[,callback])

speed:速度参数[可选]

animate语法结构

  • visibility
    属性在遮掩成分的时候,同有的时候间会保留成分在文书档案流中的影响力,遮蔽后元素的鲜为人知保持不改变。该属性包罗visible(暗中同意)和hidden几个值。
  • display 掩饰后,掩盖的成分不再占用文书档案的职位。
标签:, , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图