品易云推流 关闭
文章详情页
文章 > 头条 > js中jquery动画移动到最右边

js中jquery动画移动到最右边

js中jquery动画移动到最右边

头像

宋雪维

2021-03-22 14:37:243837浏览 · 0收藏 · 0评论

一、jquery采用了animate()方法创建自定义的动画

1、功能:创建自定义动画。

2、使用语法

$(selector).animate({params},speed,callback);

3、使用参数

params(必须):定义形成动画的CSS属性。

speed(可选):规定效果的时长,它可以取以下值:”slow”、”fast”或毫秒。

callback(可选):是动画完成后所执行的函数名称。

二、js中jquery动画移动到最右边代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>


</body>
</html>

以上就是jquery采用了animate()方法创建动画移动到最右边的自定义动画效果,是一个很有意思的设计哦~更多JavaScript学习推荐:JavaScript教程

本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图