详解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 相关文章推荐
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
教你如何使用php session
2013/10/28 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
json 实例详细说明教程
2009/10/31 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
python查看模块,对象的函数方法
2018/10/16 Python
学python安装的软件总结
2019/10/12 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
酒店营销策划方案
2014/02/07 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书