jQuery动态效果实例
jQuery常见的动态效果:
隐藏/显示效果:
1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素。
(2):隐藏/显示的速度:
语法:
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
speed 参数规定隐藏/显示的速度;callback 参数是隐藏或显示完成后所执行的函数名称。如:$("p").hide(1000) 隐藏内容的速 度。
2.使用 toggle() 方法可以用来切换 hide() 和 show() 方法。如:$("p").toggle()。
淡入淡出效果:
1.jQuery fadeIn() 用于淡入已隐藏的元素。
语法:$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
点击之后:
2.jQuery fadeOut() 方法用于淡出可见元素。语法如1;
3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。语法如1;
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
4.jQuery fadeTo() 方法允许渐变为给定的不透明度
语法:$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
滑动效果:
1.jQuery slideDown() 方法用于向下滑动元素。
语法:$("#panel").slideDown();
2.jQuery slideUp() 方法用于向上滑动元素。
语法:$("#panel").slideUp();
3.jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:$(".panel").slideToggle("slow");
动画:
1.jQuery animate() 方法用于创建自定义动画。
语法:$("div").animate({left:'250px'});
生成动画的过程中可同时使用多个属性:
如:
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px',
height:'toggle'
});
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
点击开始:
停止动画:
1.jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:$("#panel").stop();
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(); //隐藏
});
$("#show").click(function(){
$("p").show(); //显示
});
});
</script>
</head>
<body>
<p id="p1">点击隐藏就隐藏咯,点击显示就显示咯</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
jQuery动态效果实例的更多相关文章
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】
本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)转
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...
- jQuery 验证实例(shopnc二次开发)
shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
随机推荐
- cloudstack安装篇3-SELinux配置、NTP时间同步、配置ClouStack软件库
一.SELinux配置 为了让CloudStack正常工作,我们必须将SELinux设置为permissive.需要在当前系统运行状态下和启动后都能够生效,进行以下配置. 在系统运行状态下的将SELi ...
- 6个WordPress备份插件
毫无疑问,为了保证网站的数据安全,经常备份是非常有必要的,当然手动备份比较麻烦,所以很多时候我们会使用WordPress的备份插件.Jackie Hole的<6 Top WordPress Ba ...
- Docker系列(五)OVS+Docker网络打通示例
环境说明 两个虚拟机 操作系统Centos7 DOcker版本1.8 脚本内容: 1 4 7 10 19 27 32 33 39 -j ACCEPT 47 48 # R ...
- AJAX中文乱码PHP完美解决(IE和Firefox兼容)
最近在做一个项目,遇到AJAX中文乱码问题,经过一个下午的努力终于完美解决,现将心得写下来,希望对那些还困绕在这个问题而头痛不已的人们有所帮助. 众所周知,使用AJAX传送和接收中文参数时,如果不在客 ...
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- Ajax核心——XMLHttpRequest基础
XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据.也就是可以在页面已经加载后从后从服务器请求.接收数据,这样使得用户的体验度更好,而同时提升了客户 ...
- 来自奢侈品行业的CEO能给苹果带来什么?
重回苹果的奢侈品大佬:保罗丹诺威 作为伊夫·圣罗兰(Saint Laurent)时尚集团的前CEO,保罗丹诺威(Paul Deneve)9月将正式加入苹果公司,并负责该公司所谓的“特殊项目”,同时直接 ...
- java初学的几个问题
1. 请问配置JDK时环境变量path和JAVA_HOME的作用是什么? 作用:告诉操作系统编译器运行的路径和生成的类路径.这样java源程序才可以进行编译和运行. 以下4-7题请在JDK环境下编译和 ...
- get和post,session和cookie的一些说明
1.GET和POST的区别 A. 从字面意思和HTTP的规范来看,GET用于获取资源信息而POST是用来更新资源信息. B. GET提交请求的数据实体会放在URL的后面,用?来分割,参数用& ...
- C#基础知识学习手记1
这篇随笔主要用来记录我在C#学习过程做的笔记,算作是一门课程中的小知识点吧. 1. 变量和表达式 1.1 如何在输出带有引号(英文双引号.英文单引号)以 ...