jquery动画案例总结

Original 2018-10-29 12:45:51 204
abstract:<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>jquery的滑动</title>  <style> div{width: 200px;height: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jquery的滑动</title>
 <style>
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
 <script type="text/javascript" src="jquery-3.3.1.min.js">
 </script>
</head>
<body>
 <script type="text/javascript">
$(document).ready(function(){
 $('button:first').click(function() {
 $('p').animate({fontSize:'40px'},1500)// font-size改写为驼峰写法
 })
 $('button:last').click(function() {
 $('div').animate({left:'400px',
 opacity:'0.3',
 height:'400px',
 width:'400px'
 },1500) // 可以同时操作多个属性
 }) 
 $('button:eq(1)').click(function() {
 $('div').animate({
 height:'toggle'

 },1500) // 可以使用预定义的值 show,hide,toggle
 })
})
 </script>

</body>
 <button>点击</button>
 <p>点击后字体方法</p>
 <button>点击隐藏/显示</button>
 <button>点击移动div</button>
 <div></div>
</html>


Release Notes

Popular Entries