1.jquery隐藏and显示事件

$("p").hide();      //隐藏事件
$("p").hide(1000);  //1秒内缓慢隐藏
$("p").show();      //显示事件
$("p").toggle();    //在隐藏和显示中切换

隐藏后显示提示callback

$("p").hide(function(){
    alert("提示消息已经隐藏");
    });

$("p").hide(1000,function(){
    alert("1s内缓慢隐藏并提示消失已经隐藏");
    });

2.淡入淡出

$("#div1").fadeIn();             //淡入
$("#div2").fadeIn("slow");   //缓慢淡入
$("#div3").fadeIn(3000);    //延迟3秒淡入

$("#div").fadeOut()            //淡出

$("#div").fadeToggle()        //淡入淡出

$("#div3").fadeTo("slow",0.7);     //设置淡化程度  0完全消失，1不淡化

3.滑入滑出

$(".panel").slideDown();         //向下滑动显示class=panel的div

$(".panel").slideUp("slow");    //向上收起class=panel的div

$(".panel").slideToggle("slow");    //点击显示，再点击收起

例子如下：

<head>

<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");    //点击向下滑动显示div，再次点击收起
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;   /*设置隐藏的div*/
}
</style>

</head>

<body>
<div class="panel">
<p>显示隐藏的div</p>
<p>请大家关注我的博客</p>
</div>
<p class="flip">点击显示，再次点击隐藏</p>
</body>

4.动画animate

首先，说明一下为什么要调用animate，而不是直接修改css属性：用animate可以缓慢的修改div的样式，动画效果更加美观，而直接修改css则是加载闪烁直接完成，效果不佳。

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

例子：

<head>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',        //淡化
      height:'150px',
      width:'150px'

//height:'+=150px',       //可使用相对值
      //width:'+=150px'

//height:'toggle',           //使用预定值，从消失到显示
      //width:'toggle'
    });
  });
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>

分步动画

<script>
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");           //定义变量div到指定位置
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>

5.停止动画

$("div").stop();   //按钮会停止当前活动的动画，但允许已排队的动画向前执行。

$("div").stop(true);  //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

$("div").stop(true,true);  //会立即完成当前活动的动画，然后停下来。

【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】的更多相关文章

  1. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

  2. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  3. JQuery动画之滑入滑出动画

    1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...

  4. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  5. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  6. 前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调

    1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  8. jQuery动画之停止动画

    语法格式: $(selector).stop(true, false); 第一个参数: + ture: 后续动画不执行 false:后续动画会执行 第二个参数: true: 立即执行完成当前动画 fa ...

  9. jQuery 开始动画，停止动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. qml: QtCharts模块得使用（数据整合和显示) ---- <二>

    QtCharts目前已经可以免费使用,而且使用非常方便.快捷,并且提供了各种类别的支持(例如:曲线图,柱形图,折线图,饼图等). 这里讲解qml端图表显示,C++端进行数据整合,并能实现实时数据刷新( ...

  2. centos7.2安装完成的基本操作

    系统是centos7.2,安装完成的基本操作 1 修改网卡为eth02 更新系统3 给/etc/rc.local添加执行权限4 添加用户hequan5 禁用selinux6 关闭防火墙安装iptabl ...

  3. 关于Navicat远程连接远程服务器的mysql 报错问题

    我们连接远程服务器的mysql,如果出现问题,很大问题会出在服务器的端口和授权问题 首先我们通过 1:netstat -an|grep 3306 来查看mysql默认的端口3306是否开启,允许哪个i ...

  4. Perl参数

    一.#!/usr/bin/perl -w -w:prints warnings about dubious(可疑的,不确定的) constructs perldoc perlrun#可以查看参数详情 ...

  5. Linux虚拟内存（swap）调优篇-“swappiness”,“vm.dirty_background_ratio”和“vm.dirty_ratio”

      Linux虚拟内存(swap)调优篇-“swappiness”,“vm.dirty_background_ratio”和“vm.dirty_ratio” 作者:尹正杰 版权声明:原创作品,谢绝转载 ...

  6. Java中Sax解析XML

    SAX基于事件的解析,解析器在一次读取XML文件中根据读取的数据产生相应的事件,由应用程序实现相应的事件处理逻辑,即它是一种“推”的解析方式:这种解析方法速度快.占用内存少,但是它需要应用程序自己处理 ...

  7. sqlyog创建数据库表关系图

    作为一个后台前端,数据库,需求分析,运维,PPT全包的码农来说.uml建模不存在的,对不起我没有时间,就用sqlyog拉几个你看看吧.看的懂的一眼就看清了,看不懂的整再好也是白瞎. 第一步:选择增强工 ...

  8. WebStorm记录(3)

    连通接口 接口 我自己理解前后端传输数据都是通过ajax方式 一般使用get和post两种方式传输数据 GET 接口 接口描述 获取登录验证码图片及密钥 HTTP方法 POST URL /captch ...

  9. 【leetcode-51，52】 N皇后，N皇后 II

     N皇后(hard) n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题 ...

  10. LeetCode（194.Transpose File）(awk进阶)

    194. Transpose File Given a text file file.txt, transpose its content. You may assume that each row ...