jQuery 效果- 隐藏和显示:hide() 和 show()

规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
parents 找到每个span元素的所有祖先元素。 $("span").parents()
找到每个span的所有是p元素的祖先元素。 $("span").parents("p")
 <script>
$(function(){
$("button").click(function(){
$("p").hide(800);
})
})
$(function(){
$("button").click(function(){
$("p").toggle();
})
})
$(document).ready(function(){
$(".ex").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
jQuery 效果- 淡入淡出:

jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
<script>
$(function(){
$("button").click(function(){
$("div1").fadeToggle(2000);
})
})
$(function(){
$("button").click(function(){
$(".div1").fadeTo("slow", 0.45);
})
})
</script>
jQuery 效果- 滑动:

jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
 <script>
$(function(){
$(".div").click(function(){
$(".div2").slideToggle("slow");
})
})
$(function(){
$(".div").slideUp("fast",function(){
alert("456789");
})
})
</script>

jQuery 效果- 动画:

jQuery animate() 方法允许您创建自定义的动画。
jQuery stop() 方法用于停止动画或效果
Callback 函数在当前动画 100% 完成之后执行。
<script>
$(function(){
$("button").click(function(){
$("div").animate({left,'200px'})
$("div").animate({
width:"+=150px",height:"+=200px" //宽高无限循环递增
})
})
})
</script>

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏的更多相关文章

  1. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

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

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

  3. jQuery实现简单的图片淡入淡出效果

    整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...

  4. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  5. jquery 用attr修改src 淡入淡出

    $("#wanwan").animate({ opacity: 'toggle' }, "slow", null, function () { $(" ...

  6. ExtJS简单的动画效果(ext js淡入淡出特效)

    1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...

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

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

  8. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  9. jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

随机推荐

  1. jQuery之防止冒泡事件

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 方法1: event.stopPropagation(); // 阻止事件冒泡 有时候点击提交按钮会有一些默认事件.但是如果没有通过验证 ...

  2. 虚拟机+ubuntu 图形界面和终端界面的切换

    虚拟机环境,在图形界面和文本界面间切换:1  VMWare虚拟机下,由图形界面切换到文本界面,和虚拟机设置有关,默认VM占用Ctrl+Alt为热键,所以由图形界面切换到文本界面的组合键为: Ctrl+ ...

  3. nginx +lua +redis 构建自动缓存系统

    一. nginx环境搭建 第一步下载 LuaJIT-2.0.4.tar.gz http://luajit.org/download/LuaJIT-2.0.4.tar.gz安装 make &&a ...

  4. 数据结构【一】:简单队列simple queue

    简单的FIFO队列实现,非线程安全! 1.queue.h : abstract data type queue #ifndef CUR_QUEUE_H #define CUR_QUEUE_H #inc ...

  5. Nodejs新建博客练习(二)添加flash支持

    安装必须模块 npm install connect-flash npm install express-session 然后在app.js里面添加一些代码 var flash = require(' ...

  6. 【Android 界面效果31】Android--侧滑菜单应用的实现

    侧滑菜单应用现在非常多,而且实现方式也多种多样.通过在网上的多方查找,我找到郭霖少侠的这篇文章:http://blog.csdn.net/guolin_blog/article/details/874 ...

  7. node.js Web应用框架Express.js(一)

    什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...

  8. codechef January Challenge 2014 Sereja and Graph

    题目链接:http://www.codechef.com/JAN14/problems/SEAGRP [题意] 给n个点,m条边的无向图,判断是否有一种删边方案使得每个点的度恰好为1. [分析] 从结 ...

  9. P1707 刷题比赛

    P1707 刷题比赛 10通过 38提交 题目提供者nodgd 标签倍增递推矩阵洛谷原创 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 不科学 题目背景 nodgd是一个喜欢写程序的同学, ...

  10. 锋利的jQuery第2版学习笔记6、7章

    第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...