动画事件

.hide(option) 动画隐藏  会保存元素的原始属性值

$("#a2").hide({

duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})

.show(option)动画显示

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置

如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

.toggle(option) 隐藏或显示切换 内在原理还是用的.hide()和.show()

$("button:last").click(function() {
$(".right").toggle(3000);
});

.toggle()还可以模拟鼠标单机事件(jquery 1.8版本此功能被移除)

.toggle(function(){

alert("a");

},function(){

alert("a");

})

注意 jquery动画要在标准模式下进行，否则会引起抖动。现在简写可以是<!DOCTYPE html>

jquery总结06-动画事件01-基础显示和隐藏的更多相关文章

  1. jQuery将物体居中，并且转换显示和隐藏

    今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可 ...

  2. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  3. jquery 点击按钮实现listbox的显示与隐藏，点击其他地方按钮外的地方，隐藏listbox

    本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...

  4. jQuery应用实例3：鼠标经过显示离开隐藏

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 利用jquery 实现菜单控制对应视图的显示与隐藏

    效果: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta ...

  6. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  7. angularJs:动态效果之：显示与隐藏(该例对比了普通赋值，层次赋值，事件的写法对比)

    testShowAndHiddern.html <!DOCTYPE html> <html ng-app="MyModule"> <head> ...

  8. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  9. jQuery里面的常用的事件和基础动画的实现

    一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...

随机推荐

  1. 移动应用开发过程中需要哪些IOS APP工具

    虽说如今要开发一款IOS app应用软件已经不是什么难事,app开发技术已经发展成熟,所以要制作一款适用于苹果IOS智能操作系统的app软件也挺容易的了.不过对于开发者来说,可以通过一些app工具来更 ...

  2. VR原理讲解及开发入门

    本文是作者obuil根据多年心得专门为想要入门的VR开发者所写,由52VR网站提供支持.   1. VR沉浸感和交互作用产生的原理:   在之前,我们观看一个虚拟的创造内容是通过平面显示器的,52VR ...

  3. Leetcode: Ternary Expression Parser

    Given a string representing arbitrarily nested ternary expressions, calculate the result of the expr ...

  4. [原创]java WEB学习笔记105：Spring学习---AOP介绍，相关概念，使用AOP，利用 方法签名 编写 AspectJ 切入点表达式

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. IOS轮播图

    轮播图播放的主要技术在于: cell的封装.这里采用UICollectionViewCell实现. #import <UIKit/UIKit.h> @interface CircleVie ...

  6. NDK开发－简介&环境搭建(Eclipse，Android Studio)

    NDK简介 NDK(Native Development Kit)是一套工具集,允许你在Android应用中嵌入c或c++. 使用NDK的好处主要有以下4点: 安全:由于apk的java层代码很容易被 ...

  7. Mysql的基础使用之MariaDB安装

    初学mysql的小白,首次写博客,为了能让自己记得更加深刻,也是以一种小白的角度交代初学者的经历和困难,也算是记录自己成长的步伐吧 我首次用mysql是在ubuntu上 ,现在用的是linux 中的R ...

  8. 使用javascript获取服务器时间

    思路:采用异步请求的方式,发送请求,获取HTTP请求的response头,头部中包含时间,使用getResponseHeader('Date')即可. 注意:以下任何一种方法都不精确,因为请求包的传输 ...

  9. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  10. Centos7上搭建OpenvpnServer——pritunl

    首先做基本的安装,如下(国内下载pritunl的rpm包可能会有点慢,多试几次) # vi /etc/yum.repos.d/mongodb-org-3.2.repo [mongodb-org-3.2 ...