动画事件

.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. windows2008吃尽内存的解决办法

    最近才用上windows2008,之前一直用的是windows2003,发现系统运行一段时间后,内存吃紧,赶紧打开资源查看器,发现当前运行的程序占有内存都很小,后经查资料,原来是被windows200 ...

  2. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  3. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  4. Android xml资源文件中@、@android:type、@*、？、@+含义和区别

    一.@代表引用资源 1.引用自定义资源.格式:@[package:]type/name android:text="@string/hello" 2.引用系统资源.格式:@andr ...

  5. win2012,oracle11g,sqlplus切换实例的方法

    问题环境:windows 2012 r2 64位  ,oracle 11.2.0.4,多个实例. 在这种情况下, sqlplus "/as sysdba" 默认登录的是系统后面安装 ...

  6. MVC中使用EF增删改查，简单的例子

    //这个是分页数据和总页数类 public class SummaryBase<TModel> { public SummaryBase(); public IList<TModel ...

  7. 分享一个延迟加载图片的JS

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. scrapy的scrapyd使用方法

    一直以来,很多人疑惑scrapy提供的scrapyd该怎么用,于我也是.自己在实际项目中只是使用scrapy crawl spider,用python来写一个多进程启动,还用一个shell脚本来监控进 ...

  9. 为什么导入数据库要加入set names utf-8

    Repinted:http://blog.csdn.NET/class1/archive/2006/12/30/1469298.aspx 为了让你的网页能在更多的服务器上正常地显示,还是加上" ...

  10. 通过正则表达式实现简单xml文件解析

    这是我通过正则表达式实现的xml文件解析工具,有些XHTML文件中包含特殊符号,暂时还无法正常使用. 设计思路:常见的xml文件都是单根树结构,工具的目的是通过递归的方式将整个文档树装载进一个Node ...