传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

jQuery的动画效果可以应用与哪些属性

2017-7-7 22:52| 发布者: admin| 查看: 786| 评论: 0|来自: 蚂蚁部落

大家知道利用jquery可以轻松的实现动画效果,和原生的javascript比较起来真是方便无比。

先看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#antzone{
  width:100px;
  height:50px;
  background:green;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#antzone").animate({width:200},3000);
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了最为简单的动画效果,但是这个动画效果并非对所有的属性都是有效的。基本规律是这样的,如果属性值是数字的话可以使用动画,否则不可以,除非有特别的说明,background-color背景色和background-position背景位置就不能够使用动画方式,不过可以使用其他插件实现,关于如何实现背景色和背景位置的动画效果,可以参阅下面两篇文章。

相关阅读:

1.背景色动画变化可以参阅jQuery背景色渐变动画效果代码实例一章节。

2.背景位置动画变化可以参阅jQuery background-position背景位置动画效果代码实例一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:19 , Processed in 0.086841 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部