Javascript高级——7.属性animate动画

最新推荐文章于 2024-07-11 14:17:20 发布

Superstatus

最新推荐文章于 2024-07-11 14:17:20 发布

阅读量381

点赞数

分类专栏： javascript 文章标签： javascript javascript

本文链接：https://blog.youkuaiyun.com/Superstatus/article/details/80588784

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文展示了一个使用JQuery库实现的动画效果示例。通过点击一个div元素触发动画，改变其宽度、高度及透明度，并在动画完成后弹出提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery特效 - animation</title>
<script src="jquery.js"></script>
<style>
div { width:300px; height:80px; background:#CCCCCC; margin:20px; text-align:center;}

</style>
</head>

<body>
<div id="test1">
    点击运行动画
    <br/>
    animate(
    	{width:"400px",opacity:0.3,height:"400px"},3000
        )
	
</div>
<script>
$("#test1").on("click",function(){
	$(this).animate({width:"400px",opacity:0.3,height:"400px"},3000,function(){alert("callback")});
	});
</script>
</body>
</html>