<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script>
$(function(){
$("#out").click(function(){
$("#t").slideUp();
});
$("#in").click(function(){
$("#t").slideDown(2020);
});
$("#in_out").click(function(){$("#t").slideToggle()});
$("#myShow").click(function () {
$("#topImg").show();
});
$("#myHide").click(function () {
$("#topImg").hide();
});
$("#myShowOrHide").click(function(){$("#topImg").toggle()});
$("#moveright100px").click(function(){$("#topImg").animate({"left":"100px"},3000)});
$("#moveleft100px").click(function(){$("#topImg").animate({"left":"0"},2000);});
});
</script>
</head>
<body>
<button id="out">淡出</button>
<br/>
<button id="in">淡入</button>
<br/>
<button id="in_out">点击我，如果隐藏就滑入|否则滑出</button>
<br/>
<button id="myShow">点击我，显示</button>
<br/>
<button id="myHide">点击我，隐藏</button>
<br/>
<button id="myShowOrHide">点击我，如果显示就隐藏|如果隐藏就显示</button>
<br/>
<button id="moveright100px">点击我，图片向右移动100px</button>
<button id="moveleft100px">点击我，图片向左移动100px</button>
<br/>
<br/>
<div id="t" style="font-size: 32px">八维学院</div>
<img src="dou.jpg" id="topImg" style="position: absolute">
</body>
</html>
本文介绍使用jQuery实现网页元素的动画效果及显示隐藏操作，包括淡入淡出、上下滑动、左右移动等交互功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
