详解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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP类的反射用法实例
2014/11/03 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js常用排序实现代码
2010/12/28 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
python中sets模块的用法实例
2014/09/30 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
pandas重新生成索引的方法
2018/11/06 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
西柏坡导游词
2015/02/05 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书