jquery中效果的创建

1.基本

1.1  hide()和hide(speed,function(){}),其中的function可选

实例:

<script type="text/javascript">

$(function(){

$("input").click(function(){

$("#div1").hide("slow",function(){

alert("ganme over");   });

})

})

</script>

1.2show()和show(speed,function(){})同上

2.滑动

2.1slideDown(speed,function(){})和slideUp(speed,function(){})用法同1

2.2 slideToggle(speed,function(){})可以达到2.1两个效果,用法同2.1

3.淡入淡出

3.1fadeIn(speed,function(){})和fadeOut(speed,function(){}) 用法同上1

3.2fadeToggle(speed,function())可达到3.1的效果之和

3.3fadeTo(speed,opacity,function(){})调整透明度到某个值,function为可选

4. 自定义

自定义动画的高度宽度和透明度

4.1 animate(json,事件间隔(毫秒),function(0{})

注意json是花括号,并且对象的值是用双引号括起来的,因为此处用的是函数的调用,不能用css的格式来判断,例如 {width:"20px",height:"200px"}

实例:

<script type="text/javascript">

$(function(){     $("#div1").animate(

{    width:"200px",

height:"200px",

opacity:1,

},1000,function(){  alert("完成");});     })

</script>

4.2 stop()和delay(秒数)

5.$.fx.interval=time(帧频设置为ms)和$.fx.off=false 设置开启一个禁止的动画

6.用函数综合效果

f1("slideDown","slideUp");

function f1(f1,f2)

{

$("#div1")[f1](1000.function(){

$("#div1")[f2]( 1000,function(){

f1(f1,f2);

}

})

}

时间: 2024-11-03 22:25:28

jquery中效果的创建的相关文章

jquery中动画效果的函数

在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo():把被选元

JQuery中的动画效果

JQUERY DAY03: * 动画效果 * 显示与隐藏 * show() - 显示 * 无参版本 - 不具有动画效果 * show(speed,callback)有参版本 - 具有动画效果 * speed - 设置动画执行的时长,单位为毫秒 * 三个预定义值 - slow|normal|fast * callback - 当动画执行完毕后执行的函数 * hide() - 隐藏 * 无参版本 - 不具有动画效果 * hide(speed,callback)有参版本 - 具有动画效果 * spee

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

jQuery中动态创建、添加元素的方法总结

<input type="button" value="创建元素" id="btn"> <div id="box"></div> <p id="main">这是文中一段话</p> //点击按钮,动态创建元素 //方法一:$()创建元素,后用append()方法添加.append() 还可以把其他地方元素添加进这个对象中. $('#btn').cli

DOM中动态创建元素与jQuery中动态创建元素

DOM中动态创建元素与jQuery中动态创建元素 DOM中动态创建元素: 1. document.write("标签的代码")    缺点:页面中原有的元素会被覆盖掉 2. innerHTML 3. document.createElement("标签的名称") jQuery中动态创建元素: 1. $("标签的代码") 2. 对象.html("标签的代码") 原文地址:https://www.cnblogs.com/david

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading"><img src="images/common/loading.gif" ></div> css: /*加载中*/ #loading{     position: fixed;     top: 0;     left: 0;     width: 100%

jQuery中的事件和动画效果

刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高web应用程序的响应速度.(不做过多的讲解) 2.鼠标事件 鼠标事件就是用户在文档上移动或者点击时引发的操作. 1.click(); 2.mouseout(); 3.mouseout(); $(function () { $('li').on('mouseenter',function

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

jQuery ajax 动态append创建表格出现不兼容ie8

很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html