语法
$(selector).animate({params}, speed, callback);
参数:
???
- params: 必选,要执行动画的CSS属性。
???- speed: 可选,执行动画时长。
???- callback: 可选,动画执行完成后,立即执行的回调函数。
作用:
执行一组CSS属性的自定义动画
示例代码:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery动画之自定义动画</title> ???<style type="text/css"> ???????div{ ???????????position: absolute; ???????????left: 20px; ???????????top: 30px; ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????} ???</style> ???<script type="text/javascript" src="jquery.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????$("button").click(function(){ ???????????????var json = { ???????????????????"width": 500, ???????????????????"height": 500, ???????????????????"left": 300, ???????????????????"top": 300, ???????????????????"border-radius": 100}; ???????????????var json2 = { ???????????????????"width": 100, ???????????????????"height": 100, ???????????????????"left": 100, ???????????????????"top": 100, ???????????????????"border-radius": 100, ???????????????????"background-color": "red" ???????????????}; ???????????????$("div").animate(json, 1000, function(){ ???????????????????$("div").animate(json2, 1000, function(){ ???????????????????????alert("动画执行完毕!"); ???????????????????}); ???????????????}); ???????????}); ???????}) ???</script></head><body> ???<button>自定义动画</button> ???<div></div></body></html>
jQuery动画之自定义动画
原文地址:https://www.cnblogs.com/yang-wei/p/9534264.html