分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery动画之自定义动画

发布时间:2023-09-06 02:11责任编辑:赖小花关键词:jQuery动画

语法

$(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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved