措施用法实例

日期:2019-09-07编辑作者:关于计算机

正文实例叙述了jQuery中animate()方法用法。分享给我们供我们仿效。具体深入分析如下:

jQuery中animate()方法用法实例,jqueryanimate

正文实例叙述了jQuery中animate()方法用法。分享给大家供我们参谋。具体深入分析如下:

此方法用于成立自定义动画,並且能够规定动画试行时间长度、擦除效果。动画达成后还是能地接触三个回调函数。

animate()方法的利用:

方式一:

以“属性名/值”对象的不二等秘书技定义动画终止样式属性。例如:

复制代码 代码如下:

$("div").animate( {width:"1000px"})

如上代码能够将div从原有的大幅度调解到一千px。也能够三次性使用多组“属性名/值”对象。比方:

复制代码 代码如下:

$("div").animate( {width:"1000px",fontSize:20})

以上代码能够将div从原本的大幅度调节到一千px,从原有的字体大小调解到20px。须要非常注意以下三点:

1.借使尺寸未有单位,那么暗许单位是px。
2.属性值需求用双引号包裹,假设属性值是数字的话能够省略。
3.好像font-szie只怕background-color那样的天性需求去掉中间的中横线,况兼第2个单词首字母要大写。

animate()方法能够鲜明的规定动画效果不断的日子,固然不鲜明则采纳暗许值normal。比方:

复制代码 代码如下:

$("div").animate( {width:"1000px",fontSize:20},2000)

如上代码规定动画效果在两千皮秒(2秒)后完成。
在动画施行到位后方可调用回调函数。举例:

复制代码 代码如下:

$("div").animate( {width:"1000px"},五千,function(){alert("调解马到成功")})

上述代码能够在动画完毕之后触发回调函数,于是弹出叁个提醒框。
实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>帮客之家</title>
<style type="text/css">
div{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate( {width:"一千px",fontSize:20},6000,function(){alert("调度形成")});
  });
});
</script> 
</head>
<body>
  <div>小蚂蚁</div>
  <button id="btn1">执行个卡通</button>
</body>
</html>

方式二:
艺术第一中学,独有定义动画终止样式属性的时候使用大括号{},前边比方卡通速度、回调函数等等都是裸露的,他们中间都以用逗号间隔。在我们将在介绍的措施二中,速度、回调函数、队列等等都要放在大括号{}中。
例如:

复制代码 代码如下:

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

queue参数能够规定动画是不是插手动画队列实践,要是步向动画队列,将循序渐进顺序实施,也正是首先个卡通施行到位以往,队列中的第一个卡通再施行,就那样推算。假使queue参数值为true便是将动画参预队列实践,不然正是不投入队列。
duration参数便是概念动画的持续时间。
complete参数定义动画的回调函数。
实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>帮客之家</title>
<style type="text/css">
.first{
  width:150px;
  height:150px;
  border:1px solid blue;
}
.second{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".first").animate({width:"一千px"},{queue:true, duration:5000,complete:function a(){alert("宽度设置完结")}})
.animate( {fontSize:'7em'},{queue:true, duration:5000})
.animate( {borderWidth:10},{queue:true, duration:陆仟,complete:function a(){alert("宽度设置达成")}});
  });
  
  $("#btn2").click(function(){
    $(".second").animate({width:"1000px"},{queue:false, duration:1000})
.animate( {fontSize:'7em'} , 1000 )
.animate( {borderWidth:10}, 1000);
  })
})
</script>
</head>
<body>
<div class="first">款待来到帮客之家</div>
<div class="second">应接来到帮客之家</div>
<button id="btn1">施行第八个卡通</button>
<button id="btn2">试行第三个卡通</button>
</body>
</html>

世家能够对照一下加入动画队列和不步入动画队列实行效果。

企望本文所述对我们的jQuery程序设计有着援助。

本文实例陈述了jQuery中animate()方法用法。分享给我们供大家参谋。具体深入分析如下: 此方法用于创造...

此办法用于创制自定义动画,并且能够明确动画推行时间长度、擦除效果。动画完毕后还足以地接触一个回调函数。

animate()方法的采取:

方式一:

以“属性名/值”对象的主意定义动画终止样式属性。例如:

复制代码 代码如下:

$("div").animate( {width:"1000px"})

以上代码可以将div从原始的增幅调度到一千px。也足以一次性使用多组“属性名/值”对象。举个例子:

复制代码 代码如下:

$("div").animate( {width:"1000px",fontSize:20})

如上代码能够将div从原本的大幅度调解到1000px,从原有的字体大小调治到20px。供给极其注意以下三点:

1.借使尺寸未有单位,那么暗许单位是px。
2.属性值供给用双引号包裹,假若属性值是数字的话能够轻松。
3.好像font-szie或然background-color那样的性子供给去掉中间的中横线,并且第1个单词首字母要大写。

animate()方法能够鲜明的明确动画效果不断的年月,假设不分明则采纳暗许值normal。举个例子:

复制代码 代码如下:

$("div").animate( {width:"1000px",fontSize:20},2000)

如上代码规定动画效果在两千阿秒(2秒)后成功。
在动画试行到位后方可调用回调函数。举例:

复制代码 代码如下:

$("div").animate( {width:"1000px"},5000,function(){alert("调治大功告成")})

上述代码能够在动画达成之后触发回调函数,于是弹出贰个提醒框。
实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate( {width:"一千px",fontSize:20},5000,function(){alert("调节马到成功")});
  });
});
</script> 
</head>
<body>
  <div>小蚂蚁</div>
  <button id="btn1">实施个卡通</button>
</body>
</html>

方式二:
方法一中,独有定义动画终止样式属性的时候使用大括号{},后边举例卡通速度、回调函数等等都以裸露的,他们中间都以用逗号间隔。在我们就要介绍的方式二中,速度、回调函数、队列等等都要放在大括号{}中。
例如:

复制代码 代码如下:

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

queue参数可以规定动画是或不是加盟动画队列实施,借使步向动画队列,将根据顺序试行,约等于率先个卡通实施到位今后,队列中的第二个卡通再施行,由此及彼。假设queue参数值为true正是将动画加入队列实践,不然就是不参加队列。
duration参数正是概念动画的持续时间。
complete参数定义动画的回调函数。
实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.first{
  width:150px;
  height:150px;
  border:1px solid blue;
}
.second{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".first").animate({width:"1000px"},{queue:true, duration:四千,complete:function a(){alert("宽度设置达成")}})
.animate( {fontSize:'7em'},{queue:true, duration:5000})
.animate( {borderWidth:10},{queue:true, duration:6000,complete:function a(){alert("宽度设置达成")}});
  });
  
  $("#btn2").click(function(){
    $(".second").animate({width:"1000px"},{queue:false, duration:1000})
.animate( {fontSize:'7em'} , 1000 )
.animate( {borderWidth:10}, 1000);
  })
})
</script>
</head>
<body>
<div class="first">接待来到脚本之家</div>
<div class="second">招待来到脚本之家</div>
<button id="btn1">施行第一个卡通</button>
<button id="btn2">实践第贰个卡通</button>
</body>
</html>

世家能够比较一下投入动画队列和不加入动画队列实践效用。

仰望本文所述对大家的jQuery程序设计具备协助。

您大概感兴趣的稿子:

  • jQuery动画animate方法运用介绍
  • jquery animate 动画效果使用验证
  • JQuery动画animate的stop方法运用详解
  • jQuery animate效果演示
  • jQuery中animate()的使用办法及减轻$(”body“).animate({“scrollTop”:top})不被Firefox协助的主题素材

本文由今晚最快开奖现场直播发布于关于计算机,转载请注明出处:措施用法实例

关键词:

js开机自运行脚本文件

复制代码 代码如下: node.js开机自运维脚本文件,node.js运营脚本 复制代码 代码如下: #!/bin/bash ### BEGIN INIT INFO # Provid...

详细>>