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插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
随机推荐
- NOIP2015 斗地主(搜索+剪枝)
4325: NOIP2015 斗地主 Time Limit: 30 Sec Memory Limit: 1024 MBSubmit: 270 Solved: 192[Submit][Status] ...
- HW2.12
控制台: import java.util.Scanner; public class Solution { public static void main(String[] args) { Scan ...
- POJ3461–Oulipo(KMP)
题目大意 给定一个文本串和模式串,求模式串在文本串中出现的次数 题解 正宗KMP 代码: #include<iostream> #include<cstring> #inclu ...
- POJ3254Corn Fields(状压DP)
题意: John 有一个豪华的M*N个格子组成的新牧场 他想种美味的玉米 但是有些位置不能种 而且他种地不选择相邻的格子 求所有可能的种地方法 (不种也算一种选择)输入:第一行M和N, 第二行M*N地 ...
- Grails教程之--我的理解
最近工作中接触到了Grails,对于这门技术,网上的资料不算太多,有的基本也是大同小异.我打算边学边写一些东西,毕竟是一个学习的过程,写的东西如果有错误或者理解不正确的地方,还希望大家能指出来.帮助我 ...
- Android完美解决输入框EditText隐藏密码打勾显示密码问题
长话短说,一共有两种方法.首先你需要在布局文件里面给EditText设置一个android:inputType="numberPassword"属性.我这里默认规定密码只能是数字了 ...
- UNITY 打包安卓APK
1,安装JDK.这个直接下就行了. 2,安装android sdk相关.这个比较蛋疼,官网是被墙的.有些网站的包还是需要访问墙外下载的.关键是找对那个能用的包(对我来说就是不FQ). http://p ...
- java使用xheditor Ajax异步上传错误
java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...
- Installutil.exe 注册exe
进入到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\InstallUtil.exe目录下,然后输入Installutil.exe 文件路径实现注册 I ...
- php连mssql中文乱码问题
我在将一个aspx+mssql的系统做成php+mssql的系统时,感觉架构大不一样,aspx多是aspx页面+aspx.cs后台协同开发,多用可视化空间开发,而php我则选用了smarty模板,感觉 ...