详解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实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
django实现日志按日期分割
2020/05/21 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Yahoo-PHP面试题4
2012/05/05 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
教师党性分析材料
2014/02/04 职场文书
初三班主任寄语大全
2014/04/04 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
授权委托书范文
2014/07/31 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL