jquery效果(二)

jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
$("div").animate({left:‘250px‘});
});

  

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
实例

$("button").click(function(){
$("div").animate({
left:‘250px‘,
opacity:‘0.5‘,
height:‘150px‘,
width:‘150px‘
});
});

  

提示:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用

paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
实例

$("button").click(function(){
$("div").animate({
left:‘250px‘,
height:‘+=150px‘,
width:‘+=150px‘
});
});

  

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
实例

$("button").click(function(){
$("div").animate({
height:‘toggle‘
});
});

  

jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用


实例 1
隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:

$("button").click(function(){
var 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");
});

  

实例 2
下面的例子把 <div> 元素移动到右边,然后增加文本的字号:

$("button").click(function(){
var div=$("div");
div.animate({left:‘100px‘},"slow");
div.animate({fontSize:‘3em‘},"slow");
});

jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。

Callback 函数在当前动画 100% 完成之后执行。

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

  

jQuery chaining方法链接
允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示:这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

  

jquery效果(二)

时间: 2024-10-28 15:42:06

jquery效果(二)的相关文章

Jquery效果代码--(二)

//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); }); //展示效果演示 $(document).ready(function(){ $("#show").click(function

jQuery效果——动画

jQuery动画-animate()方法用于创建自定义动画. 语法:$(选择元素).animate(参数一{定义形成动画的css属性},参数二 规定效果时长,取值为slow fast或毫秒.参数三 动画完成后所执行的函数名称). 默认情况下所有HTML元素都有一个静态位置且无法移动,如需对位置进行操作,首先设置元素cssposition属性 生成动画过程中可使用多个属性,几乎可以操作所有的css属性,使用animate()时,必须使用camel标记法书写所有的属性名,即驼峰式写法,色彩动画不包含

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hide()与show()方法 eg1:显示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微软雅黑";color:#666;} .yym{wid

玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { $("#"+formId+" input,textarea").removeAttr("readonly"); $("#"+formId+" input,textarea").css('backgroundCo

PHP和Jquery生成二维码,以及PHP生成电子名片

自从跳槽了,就没有发过博客了,很愧疚,我是自学的PHP,现在这家公司加上老板才12个人,我是典型的从分工明确的公司跳槽到小公司,深刻体会到了所谓'大公司'和'小公司'的区别,上一个公司,一个项目到我这里,静态页都是写好的,我只需要将数据动态加载就行了,但是目前这个公司,典型的一个人当几个人用,我刚去公司一个多月,直接让我做项目经理的工作,去甲方公司需求调研,然后自己开发,除开设计和切图,我基本上都参与.锻炼人说实话还是小公司较好,但是锻炼技术我觉得还是大公司较好,因为我在我上一家公司呆了3个月,

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat

jQuery效果有哪些

jqeury的效果有隐藏显示.淡入淡出.滑动.动画.停止动画,还可以把方法和动作链接起来.下面我来说一下它们的用法和需要的参数. 1.隐藏/显示 hide()可以使元素隐藏.语法是: $(selector).hide(speed,callback); show()使元素显示.语法是:$(selector).show(speed,callback); toggle()切换 hide() 和 show() 方法.语法是$(selector).toggle(speed,callback); 可选的 s

java 生成 二维码 和jquery 生成二维码

生成二维码 Java 生成二维码: 思路为拿到jar 包知道里面的方法使用 Step one : 在https://github.com/zxing中下载(点击网页中名为 zxing 的a标签,跳转到源码页面,点击release 查看所有发布的源码,下载zip压缩文件 Step two:  解压文件后打开文件夹,将core包和javase包 中的com包拷贝到一java项目src目录下.右键导出 jar file  得到一个二维码开发的jar包 Step three: 进行二维码制作 impor