jquery中animate的使用 0.0

Posted 太阳你好 ☂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中animate的使用 0.0相关的知识,希望对你有一定的参考价值。

一、使用方法

1、$("div").animate( {width:"300px"});

$("div").animate( {‘width‘:‘300px‘});

$("div").animate( {‘width‘:300+"px"});

$("div").animate( {‘width‘:300});

$("div").animate( {width:300});

以上五种方法效果相同

注:(1)属性值需要被引号包裹起来,如前三种方法中都包含了字符串‘px‘则需要用引号。

但是数值不需要,如第四五种方法中的300不需要引号,其中不区分单双引号

(2)属性名可以不被引号包裹,其中不区分单双引号。

(3)当数值型的属性值不加单位时,默认为‘px‘。

2、$("div").animate( {width:"300px",fontSize:30});

(1)font-size这种中间带有横线的属性需要去除横线,但是需要将第二个单词首字母大写。

(2)当{}里面放多个属性时需要用逗号隔开。

3、$("div").animate({width:‘300px‘,fontSize:30,backgroundColor:‘red‘},500);

(1)上述2中提到中间带有横线的属性需去除横线等,本例中backgroundColor同理,但是animate本身不可以设置颜色等属性,则需要引入如下js方可使用:

  <script src="jquery.animate-colors.js"></script>

下载地址:http://www.bitstorm.org/jquery/color-animation/

(2)animate({},500) 表示执行该动画的时间为5秒。   

(3)例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="jquery.animate-colors.js"></script>
<style>
.div span{
display: block;
width: 100px;
height: 200px;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="div">
<span>demo</span>
</div>
<script>
$(‘.div span‘).click(function(){
$(this).animate({fontSize:30,width:300+‘px‘,backgroundColor:‘red‘},500);
});
</script>
</body>
</html>

4、$("div").animate( {width:"1000px"},5000,function(){alert("在动画执行完成后弹出该框")});

该例子指当5秒执行动画之后,调用函数function()。

二、css中的不是所有属性都可以用animate来动态改变,下面总结了可以操作元素的一些属性:

    * backgroundPosition

    * borderWidth

    * borderBottomWidth

    * borderLeftWidth

    * borderRightWidth

    * borderTopWidth

    * borderSpacing

    * margin

    * marginBootom

    * marginLeft

    * marginRight

    * marginTop

    * outlineWidth

    * padding

    * paddingBottom

    * paddingLeft

    * paddingRight

    * paddingTop

    * height

    * width

    * maxHeight

    * maxWidth

    * minHeight

    * minWidth

    * font

    * fontSize

    * bottom

    * left

    * right

    * top

    * letterSpacing

    * wordSpacing

    * lineHeight

    * textIndent

    * opacity

三、相关网址

http://www.bitstorm.org/jquery/color-animation/

https://github.com/jquery/jquery-color/

http://runjs.cn/detail/xmax7vo3

http://blog.csdn.net/goodshot/article/details/8648706

以上是关于jquery中animate的使用 0.0的主要内容,如果未能解决你的问题,请参考以下文章

基于CSS3新属性Animation及transform实现类似翻书效果

仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误

jQuery animate() 不使用颜色

使用 .animate() 的 jQuery 在 IE8 中无法执行任何操作

jQuery中动画animate(下)

有没有办法在 jquery animate 中使用 scss mixin?