详解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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
js读取配置文件自写
2014/02/11 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python实现图片插入文字
2019/11/26 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python能做哪些生活有趣的事情
2020/09/09 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
用友笔试题目
2016/10/25 面试题
计算机相关的自我评价
2014/01/15 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
单位介绍信范文
2014/01/18 职场文书
《凡卡》教学反思
2014/04/09 职场文书
幼儿园课题方案
2014/06/09 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
租车协议书范本2014
2014/11/17 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
采购员工作总结范文
2015/08/12 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python