详解JQuery基础动画操作


Posted in jQuery onApril 12, 2019

1.jQuery动画效果,隐藏和显示。

两个方法:hide()"隐藏"      show()"显示"

<p>JQuery动画效果,隐藏和显示</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
 
 <script>
  $(document).ready(function(){
   $("#button1").click(function(){
    $("p").hide();
   })
   $("#button2").click(function() {
    $("p").hide();
   })
  })
 </script>

语法:$(selector).hide(speed.callback)
语法:$(selector).show(speed.callback)
callback参数:是隐藏或显示完成后执行的函数名称。

$(document).ready(function(){
   $("#button1").click(function(){
    $("p").hide(500);
    alert("恭喜你,显示完成")
   })
   $("#button2").click(function() {
    $("p").show(200,function(){
     alert("恭喜你,显示完成")
    })
   }

语法:$(selector).toggle(speed.callback)
speed参数规定参数隐藏和显示的速度,取值为"show""fast".毫秒(1秒等于1000毫秒)
callback参数:是隐藏或显示完成后执行的函数名称。

$("#button3").click(function() {
     $("p").toggle(1000,function(){
     $("p").css({color:"yellow"})
     })

2.Jquery滑动和动画
两个方法:slideDow()       toggleDoe()      

<body>
<div id="slide">点击我,滑动显示或者隐藏面板</div>
<div id="panel">Hello JQuery</div>
</body>
 
 
 
 <style>
  #slide,#slide{
   padding:5px;
   text-align:center ;
   background-color: #4bffe8;
   border:solid 1px #181caa;
  }
  #panel{
   display: none;
   padding:40px;
  }
 </style>
 <script>
  $(document).ready(function(){
   $("#slide").click(function(){
    $("#panel").slideToggle()
   })
  })
  </script>

3.JQuery动画效果,动画
animate()方法用于创建自定义的动画。

 语法:
$(selector),animate({params},speed,callback)
必须的params参数定义形成动画的css属性

<body>
<button>开始动画</button>
<p>默认情况下所有的HTML元素有一个静态的位置,且是不可能移动的,如果需要改变,那么须将元素的position属性设置为absolute,relative,fixed</p>
<div style="background-color: red;height:100px;width:100px;position:absolute"></div>
</body>
 
 
 
<script>
  $(document).ready(function() {
   $("button").click(function () {
    $("div").animate({left:"200px"},1000,function(){
    $("div").css({background:"yellow"})
   })
   })
  })
 </script>

4.操作多个属性:

animate();使用相对值 

<body>
<input type="button" value="开始动画" id="button">
<div style="background-color: red;height:100px;width:100px;position:absolute"></div>
</body>
 
 
 <script>
  $(document).ready(function(){
   $("#slide").click(function() {
    $("div").animate({
     left:"200px",opacity:"0.5",height:"160px",width:"160px"
    })
   })
   })
 </script>

以上所述是小编给大家介绍的JQuery基础动画操作详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
详解jQuery设置内容和属性
Apr 11 #jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
jQuery分组选择器简单用法示例
Apr 04 #jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
Javascript查看大图功能代码实现
2020/05/07 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
python 切换root 执行命令的方法
2019/01/19 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python的形参和实参使用方式
2019/12/24 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
领导干部考察材料
2014/02/08 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015年安全生产责任书
2015/01/30 职场文书
先进教师个人总结
2015/02/11 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
2015年党总支工作总结
2015/05/25 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
详解Python函数print用法
2021/06/18 Python