<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<script src="bootstrap/js/jquery.min.js"></script>
<style>
#div1{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50px;
}
</style>
</head>
<body>
<div>
<h2>animate</h2>
<p>(params,[speed],[easing],[fn])</p>
<p>用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
</p>
</div>
<div id="div1">div</div>
<br><br><br><br><br>
<button id="btn">start</button>
<h2>jQuery.fx.off = true</h2>
<p>把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。</p>
<h2>jQuery.fx.interval = 100</h2>
<p>设置动画的显示帧速。</p>
<script>
$(function(){
$('#btn').click(function(){
$('#div1').animate({
width: "200",
height: "200px",
left: "800px",
borderWidth: "5px",
opacity: "toggle",
},"show");
})
})
</script>
</body>
</html>
自定义动画效果
最新推荐文章于 2022-05-28 23:28:29 发布