`
txf2004
  • 浏览: 7040822 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery_API_08_Effects

阅读更多

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="马永占(MyZ)" />
<meta name="Copyright" content="马永占(MyZ)" />
<meta name="description" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
</head>
<body>

<script type="text/javascript">
$("document").ready(function(){
////////////////////////////////////////////////////////////////////////////////////////
//Basics:

//show( ) Returns: jQuery
//Displays each of the set of matched elements if they are hidden.
//$("p").show()

//show( speed, callback ) Returns: jQuery
//Show all matched elements using a graceful animation and firing an optional callback after completion.
// $("#showr").click(function () {
// $("div:eq(0)").show("fast", function () {
// // use callee so don't have to name the function
// $(this).next().show("fast", arguments.callee);
// });
// });
// $("#hidr").click(function () {
// $("div").hide(2000);
// });

//hide( ) Returns: jQuery
//Hides each of the set of matched elements if they are shown.
// $("p").hide();
// $("a").click(function () {
// $(this).hide();
// return false;
// });
//
//hide( speed, callback ) Returns: jQuery
//Hide all matched elements using a graceful animation and firing an optional callback after completion.
// $("#hidr").click(function () {
// $("span:last-child").hide("fast", function () {
// // use callee so don't have to name the function
// $(this).prev().hide("fast", arguments.callee);
// });
// });
// $("#showr").click(function () {
// $("span").show(2000);
// });

//toggle( ) Returns: jQuery
//Toggle displaying each of the set of matched elements.
// $("button").click(function () {
// $("p").toggle();
// });

//toggle( speed, callback ) Returns: jQuery
//Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
// $("button").click(function () {
// $("p").toggle("slow");
// });
////////////////////////////////////////////////////////////////////////////////////////
//Sliding:

//slideDown( speed, callback ) Returns: jQuery
//Reveal all matched elements by adjusting their height and firing an optional callback after completion.
// $("div").click(function () {
// $(this).css({ borderStyle:"inset", cursor:"wait" });
// $("input").slideDown(1000,function(){
// $(this).css("border", "2px red inset")
// .filter(".middle")
// .css("background", "yellow")
// .focus();
// $("div").css("visibility", "hidden");
// });
// });

//slideUp( speed, callback ) Returns: jQuery
//Hide all matched elements by adjusting their height and firing an optional callback after completion.
// $("button").click(function () {
// $(this).parent().slideUp("slow", function () {
// $("#msg").text($("button", this).text() + " has completed.");
// });
// });

//slideToggle( speed, callback ) Returns: jQuery
//Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
// $("#aa").click(function () {
// $("div:not(.still)").slideToggle("slow", function () {
// var n = parseInt($("span").text(), 10);
// $("span").text(n + 1);
// });
// });
////////////////////////////////////////////////////////////////////////////////////////
//Fading:

//fadeIn( speed, callback ) Returns: jQuery
//Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
// $("a").click(function () {
// $("div").fadeIn(3000, function () {
// $("span").fadeIn(100);
// });
// return false;
// });

//fadeOut( speed, callback ) Returns: jQuery
//Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.
// $("span").click(function () {
// $(this).fadeOut(1000, function () {
// $("div").text("'" + $(this).text() + "' has faded!");
// $(this).remove();
// });
// });
// $("span").hover(function () {
// $(this).addClass("hilite");
// }, function () {
// $(this).removeClass("hilite");
// });

//fadeTo( speed, opacity, callback ) Returns: jQuery
//Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
// $("div").click(function () {
// $(this).fadeTo("fast", Math.random());
// });
////////////////////////////////////////////////////////////////////////////////////////
//Custom:

//animate( params, duration, easing, callback ) Returns: jQuery
//A function for making custom animations.
// $("#right").click(function(){
// $(".block").animate({"left": "+=50px"}, "slow");
// });
//
// $("#left").click(function(){
// $(".block").animate({"left": "-=50px"}, "slow");
// });

//animate( params, options ) Returns: jQuery
//A function for making custom animations.
//$("p").animate({
// "height": "toggle", "opacity": "toggle"
// }, { duration: "slow" });
//or
//$("p").animate({
// left: "50px", opacity: 1
// }, { duration: 500, queue: false });
//or
//$("p").animate({
// "opacity": "show"
// }, { "duration": "slow", "easing": "easein" });
//or
//$("p").animate({
// height:200, width:400, opacity: .5
// }, 1000, "linear", function(){alert("all done");} );

//stop( clearQueue, gotoEnd ) Returns: jQuery
//Stops all the currently running animations on all the specified elements.
// Start animation
// $("#go").click(function(){
// $(".block").animate({left: '+=100px'}, 2000);
// });
//or
// Stop animation when button is clicked
// $("#stop").click(function(){
// $(".block").stop();
// });
//or
// Start animation in the opposite direction
// $("#back").click(function(){
// $(".block").animate({left: '-=100px'}, 2000);
// });

//queue( ) Returns: Array<Function>
//Returns a reference to the first element's queue (which is an array of functions).
// $("#show").click(function () {
// var n = $("div").queue("fx");
// $("span").text("Queue length is: " + n.length);
// });
// function runIt() {
// $("div").show("slow");
// $("div").animate({left:'+=200'},2000);
// $("div").slideToggle(1000);
// $("div").slideToggle("fast");
// $("div").animate({left:'-=200'},1500);
// $("div").hide("slow");
// $("div").show(1200);
// $("div").slideUp("normal", runIt);
// }
// runIt();

//queue( callback ) Returns: jQuery
//Adds a new function, to be executed, onto the end of the queue of all matched elements.
// $(document.body).click(function () {
// $("div").show("slow");
// $("div").animate({left:'+=200'},2000);
// $("div").queue(function () {
// $(this).addClass("newcolor");
// $(this).dequeue();
// });
// $("div").animate({left:'-=200'},500);
// $("div").queue(function () {
// $(this).removeClass("newcolor");
// $(this).dequeue();
// });
// $("div").slideUp();
// });

//queue( queue ) Returns: jQuery
//Replaces the queue of all matched element with this new queue (the array of functions).
// $("#start").click(function () {
// $("div").show("slow");
// $("div").animate({left:'+=200'},5000);
// $("div").queue(function () {
// $(this).addClass("newcolor");
// $(this).dequeue();
// });
// $("div").animate({left:'-=200'},1500);
// $("div").queue(function () {
// $(this).removeClass("newcolor");
// $(this).dequeue();
// });
// $("div").slideUp();
// });
// $("#stop").click(function () {
// $("div").queue("fx", []);
// $("div").stop();
// });

//dequeue( ) Returns: jQuery
//Removes a queued function from the front of the queue and executes it.
// $("button").click(function () {
// $("div").animate({left:'+=200px'}, 2000);
// $("div").animate({top:'0px'}, 600);
// $("div").queue(function () {
// $(this).toggleClass("red");
// $(this).dequeue();
// });
// $("div").animate({left:'10px', top:'30px'}, 700);
// });
////////////////////////////////////////////////////////////////////////////////////////
});
</script>
</body>
</html>

分享到:
评论

相关推荐

    jQuery_API_1.4.4

    《jQuery API 1.4.4:深入理解与应用》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画效果和Ajax交互。jQuery API 1.4.4版本是其历史上的一个重要里程碑,它包含了丰富的...

    JQuery_1.4_API

    **jQuery 1.4 API 知识点详解** jQuery 是一个高效、易用且功能丰富的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。jQuery 1.4 API 提供了一系列的方法和函数,使得开发者能够更方便...

    JQuery_Api文档

    在Dw5这样的早期Web开发工具中,结合JQueryAPI文档的使用,可以更好地实现动态效果和交互性。 JQuery API(应用程序接口)文档详细介绍了JQuery的各种函数和方法,这些功能包括: 1. **选择器(Selectors)**:...

    jQuery_1.4_API

    **jQuery 1.4 API 知识点详解** jQuery 是一个高效、易用且功能丰富的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery 1.4 API 虽然已经是一个较旧的版本,但其稳定性和广泛支持...

    JQuery_1.4_API.CHM JQuery_1.4_API.CHM

    《jQuery 1.4 API中文手册》是针对JavaScript库jQuery的1.4版本提供的一份详细参考资料。jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。这份CHM文件包含...

    中文版JQuery_1.4_API手册

    **jQuery 1.4 API 手册:深入理解与应用** jQuery 是一个高效、简洁的JavaScript库,它极大地简化了JavaScript编程,特别是处理HTML文档、事件处理、动画以及Ajax交互。中文版的jQuery 1.4 API手册是开发者学习和...

    jquery_api.chm

    《jQuery API中文手册》是广大前端开发者不可或缺的学习资源,它详尽地介绍了jQuery库的各种功能和用法。jQuery是一个高效、简洁且强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。...

    jquery_api 帮助文档

    4. **动画效果(Effects)**:jQuery的动画功能强大,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法用于创建平滑的显示和隐藏效果,`animate()`则允许自定义动画效果。 5. **Ajax交互(Ajax)**:jQuery的`$....

    JQuery_1.4_API及jQuery常用插件大全

    **jQuery_1.4_API详解** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在jQuery 1.4版本中,API进行了诸多优化和增强,使得开发者能更高效...

    jquery中文帮助文档(jquery_api.zip)

    4. **动画效果(Effects)**:jQuery的`.fadeIn()`, `.slideUp()`, `.animate()`等方法可以创建各种动态效果,使网页更具交互性。 5. **Ajax交互(Ajax)**:`.ajax()`, `.get()`, `.post()`等方法简化了异步数据...

    jQuery_api_for_dw4(谷歌手机dw4 (DW语法提示插件)

    **jQuery API for DW4 谷歌手机版DW4 (DW语法提示插件)** **一、jQuery介绍** jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript编程,使得网页动态交互变得更加简单。jQuery的核心理念是...

    jQuery_API指南.chm

    《jQuery API指南》是Web开发领域中不可或缺的参考资料,它为开发者提供了全面的jQuery库的API接口介绍。jQuery是一个高效、简洁且强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互等...

    JQuery_1.4_API.zip

    **jQuery 1.4 API 知识点详解** jQuery 是一个高效、易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery 1.4 API是jQuery的一个重要版本,它包含了丰富的功能和改进,使得...

    jquery_中文API

    **jQuery中文API详解** jQuery,一个轻量级、高性能的JavaScript库,因其简洁的语法和强大的功能,成为了前端开发人员的首选工具。这个"jquery_中文API"文档旨在为中文使用者提供详尽的jQuery API参考,帮助开发者...

    jquery-API_CHM

    本资源包含了两个版本的jQuery API文档:一个是针对jQuery 1.7.2的2012年4月20日更新的中文版("jquery1.7.2_20120420中文版.chm"),另一个是jQuery API 1.4.1的中文版("jQueryAPI-1.41.chm")。 jQuery是一个...

    jQuery1.10.3_API中文手册

    **jQuery 1.10.3 API 中文手册** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery 1.10.3 API 中文手册是开发者们理解并有效利用jQuery功能的重要资源。...

    jquery_1.6_中文API

    **jQuery 1.6 中文 API 全解析** jQuery 是一个高效、易用的 JavaScript 库,它极大地简化了网页的交互和动态化处理。在 jQuery 1.6 版本中,该库引入了一些重要的更新和改进,使得开发者能够更高效地编写代码。这...

    jQueryAPI_1.7.1_CN.chm

    4. **动画效果(Effects)**:jQuery的动画功能包括淡入淡出(`fadeIn()`, `fadeOut()`), 滑动(`slideToggle()`)和自定义动画(`animate()`)。这些方法使得创建动态效果变得简单易行。例如,`$("img").fadeIn(1000)`会...

    jquery1.7_2 api 和 jquery1.7_2 ui api

    **jQuery 1.7.2 API 和 jQuery UI API 知识点详解** jQuery 是一个流行的JavaScript库,它极大地简化了JavaScript编程,特别是处理DOM操作、事件处理和动画效果。jQuery 1.7.2是该库的一个稳定版本,提供了一系列...

    jqueryUi_demo_api

    这个“jqueryUi_demo_api”压缩包文件包含了对jQuery UI的演示和API文档,主要涉及的文件是“jquery-ui-1.10.1.custom”,这是一个定制版本的jQuery UI库,版本号为1.10.1。 **jQuery UI 的核心组件** 1. **对话框...

Global site tag (gtag.js) - Google Analytics