锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

二、动画
1 show()方法和hide()方法


代码如下:

$("selector").show()
从display:none还原元素默认或已设置的display属性
$("selector").hide()
设置元素的display样式为none，等于$("selector").css("display","none")

（注：传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性；传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒）
2 fadeIn()方法和fadeOut()方法


代码如下:

$("selector").fadeIn()
控制透明度在指定时间内从display:none提高至完全显示
$("selector").fadeOut()
控制透明度在指定时间内降低至display:none;

3 slideUp()方法和slideDown()方法


代码如下:

$("selector").slideUp()
控制元素高度在指定时间内从下到上缩短至display:none;
$("selector").slideDown()
控制元素高度在指定时间内从display:none延伸至完整高度

4 自定义动画方法animate()


代码如下:

$("selector").animate(params,speed,callback);
params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度参数，可选
callback:在动画完成时执行的参数（即回调函数），可选

常见的动画例子


代码如下:

<script>
//自定义动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000); //selector在3秒内向右移动500px
});
})
</script>

代码如下:

<script>
//累加、累减动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"+=500px"},3000); //连续触发click事件时，在当前位置累加500px
});
})
</script>
<script>
//多重动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向运动，同时增加高度
});
})
</script>
<script>
//按顺序执行多个动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //动画队列
});
})
</script>

5 动画回调函数
因css()方法不会加入动画队列中，则会马上执行。如若要在动画最后改变selector的css，需要利用回调函数
例：


代码如下:

<script>
$("selector").click(function(){
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){
$(this).css("property3","value3"); //css()方法利用回调函数加入动画队列
});
})
</script>

（注：动画回调函数适用于jQuery所有的动画效果方法）
6 停止动画和判断是否处于动画状态
$("selector").stop()
结束当前动画，如队列中存在下一个动画则立即执行下一个动画，格式$("selector").stop([clearQueue][,gotoEnd])
切换动画的例子：


代码如下:

<script>
$("selector").hover(function(){
$(this).stop().animate();
},function(){
$(this).stop().animate();
})
</script>

clearQueue参数设置为true时，将清空当前元素接下来尚未执行完的动画队列
例：


代码如下:

<script>
$("selector").hover(function(){
$(this).stop(true).animate().animate() //如此时触发光标移出事件，直接跳过后面的动画队列，避免执行本队列第二个动画
},function(){
$(this).stop(true).animate().animate()
})
</script>

gotoEnd参数设置为true时，可将正在执行的动画直接到达结束时刻的状态
is(":animated")
判断元素是否处于动画状态，可用于防止动画累积
例：


代码如下:

<script>
if(!$("selector").is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
</script>

7 其他动画方法
3个专门用于交互的动画方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])


代码如下:

$("selector").toggle()
切换元素的可见状态，如元素隐藏则切换为可见，反之亦然
$("selector").slideToggle()
通过高度变化来切换元素的可见性
$("selector").fadeTo()
把元素的不透明度以渐进方式调整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度

8 动画方法概括


代码如下:

toggle()用来代替hide()和show()
slideToggle()用来代替slideUp()和slideDown()
animate()可代替所有动画方法

赞 (0)

相关推荐

  • jQuery中animate动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • jQuery中事件与动画的总结分享

    jQuery中事件与动画的总结分享

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • 分享一些常用的jQuery动画事件和动画函数

    部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa

  • jQuery事件与动画基础详解

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                        执行时机 click(fn)                单击鼠标 $(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); }); mouseov

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • 锋利的jQuery 要点归纳（二） jQuery中的DOM操作（下）

    12 设置和获取HTML.文本和值 $("selector").html() 获取html代码 $("selector").html(html) 设置html代码(替换标签中内容),html()方法不可用于XML文档 $("selector").text() 获取纯文本内容 $("selector").text(text) 设置文本内容(替换标签中内容),text()方法可以用于XML文档 $("selector&q

  • 锋利的jQuery 要点归纳（一） jQuery选择器

    1 基本选择器 $(#id)    根据给定的id匹配一个元素$(.class)    根据给定的类名匹配元素$(element)    根据给定的元素名匹配元素$(*)    匹配所有元素$(selector1,selector2,...,selectorN)    将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant")    选取ancestor元素里的所有descendant(后代)元素$("parent > c

  • 关于Jquery中的事件绑定总结

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出.交流. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事

  • JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • Jquery调用iframe父页面中的元素及方法

    一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 二.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 三.实例 父页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._De

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

  • JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

随机推荐