jQuery_API_08_Effects

最新推荐文章于 2025-04-17 20:34:57 发布

最新推荐文章于 2025-04-17 20:34:57 发布 · 72 阅读

文章标签：

#jQuery #CSS #JavaScript #出版 #XHTML #ViewUI

本文详细介绍了使用jQuery库实现的各种动画效果，包括显示、隐藏、切换、滑动、淡入淡出等基本动画，以及如何通过自定义动画参数实现更复杂的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

//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>