jQuery动画，案例

显示、隐藏动画1.显示动画

show([s,[e],[fn]])

内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;

代码语言：javascript复制// 编写jQuery相关代码

$("button").eq(0).click(function () {

// $("div").css("display", "block");

// 注意: 这里的时间是毫秒

$("div").show(1000, function () {

// 作用: 动画执行完毕之后调用

alert("显示动画执行完毕");

});

});2.隐藏动画

hide([s,[e],[fn]])

代码语言：javascript复制$("button").eq(1).click(function () {

// $("div").css("display", "none");

$("div").hide(1000, function () {

alert("隐藏动画执行完毕");

});

});3.切换动画(显示变隐藏,隐藏变显示)

toggle([spe],[eas],[fn])

代码语言：javascript复制$("button").eq(2).click(function () {

$("div").toggle(1000, function () {

alert("切换动画执行完毕");

});

});注意事项:

show(1000, function () {}；) 第一个参数单位是毫秒, 1000毫秒等于1秒

默认的动画时长是400毫秒

除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast

slow本质是600毫秒

normal本质是400毫秒

fast本质是200毫秒

其它两个方法同理可证

展开、收起动画参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

slideDown([s],[e],[fn])

展开动画

代码语言：javascript复制$("button").eq(0).click(function () {

$("div").slideDown(1000, function () {

alert("展开完毕");

});

});slideUp([s,[e],[fn]])

收起动画

代码语言：javascript复制$("button").eq(1).click(function () {

$("div").slideUp(1000, function () {

alert("收起完毕");

});

});slideToggle([s],[e],[fn])

切换动画(展开变收起,收起变展开)

代码语言：javascript复制$("button").eq(2).click(function () {

$("div").slideToggle(1000, function () {

alert("收起完毕");

});

});淡入、淡出动画参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

fadeIn([s],[e],[fn])

淡入动画

代码语言：javascript复制$("button").eq(0).click(function () {

$("div").fadeIn(1000, function () {

alert("淡入完毕");

});

});fadeOut([s],[e],[fn])

淡出动画

代码语言：javascript复制$("button").eq(1).click(function () {

$("div").fadeOut(1000, function () {

alert("淡出完毕");

});

});fadeToggle([s,[e],[fn]])

切换动画(显示变淡出,不显示变淡入)

代码语言：javascript复制$("button").eq(2).click(function () {

$("div").fadeToggle(1000, function () {

alert("切换完毕");

});

});fadeTo([[s],o,[e],[fn]])

淡入到指定透明度动画

可以通过第二个参数,淡入到指定的透明度(取值范围0~1)

代码语言：javascript复制$("button").eq(3).click(function () {

$("div").fadeTo(1000, 0.2, function () {

alert("淡入完毕");

})

});自定义动画有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求

animate(p,[s],[e],[fn])

代码语言：javascript复制/*

第一个参数: 接收一个对象, 可以在对象中修改属性

第二个参数: 指定动画时长

第三个参数: 指定动画节奏, 默认就是swing

第四个参数: 动画执行完毕之后的回调函数

*/

$(".two").animate({

marginLeft: 500

}, 5000, "linear", function () {

// alert("自定义动画执行完毕");

});每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画

代码语言：javascript复制$("button").eq(1).click(function () {

$(".one").animate({

width: "+=100"

}, 1000, function () {

alert("自定义动画执行完毕");

});

});同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画

代码语言：javascript复制$(".one").animate({

width: 500,

height: 500

}, 1000, function () {

alert("自定义动画执行完毕");

});动画队列多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画

代码语言：javascript复制$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {

$(".one").slideUp(1000, function () {

$(".one").show(1000);

});

});但是如果后面紧跟一个非动画方法则会被立即执行

代码语言：javascript复制// 立刻变为黄色,然后再执行动画

$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");如果想颜色再动画执行完毕之后设置, 1.使用回调 2.使用动画队列

代码语言：javascript复制$(".one").slideDown(1000,function () {

$(".one").slideUp(1000, function () {

$(".one").show(1000, function () {

$(".one").css("background", "yellow")

});

});

});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {

$(".one").css("background", "yellow")

});注意点:

动画队列方法queue()后面不能继续直接添加queue()

如果想继续添加必须在上一个queue()方法中next()方法

代码语言：javascript复制$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {

$(".one").css("background", "yellow");

next(); // 关键点

}).queue(function () {

$(".one").css("width", "500px")

});动画相关方法delay(d,[q])

设置动画延迟时长

代码语言：javascript复制$(".one").animate({

width: 500

// height: 500

}, 1000).delay(2000).animate({

height: 500

}, 1000);stop([c],[j])

停止指定元素上正在执行的动画

代码语言：javascript复制// 立即停止当前动画, 继续执行后续的动画

// $("div").stop();

// $("div").stop(false);

// $("div").stop(false, false);

// 立即停止当前和后续所有的动画

// $("div").stop(true);

// $("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画

// $("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的

$("div").stop(true, true);案例1——新浪微博主要利用已有的图片素材，通过jQuery的事件监听，节点操作，来实现一个微博界面的发布，删除，点赞等功能，主要处理了排版的问题

实现代码HTML

代码语言：javascript复制

CSS

代码语言：javascript复制*{

margin: 0;

padding: 0;

}

body{

width: 100%;

height: 100%;

background: url(../images/body_bg.jpg) no-repeat center 0;

}

.nav{

width: 100%;

height: 48px;

}

.nav img{

width: 100%;

}

.content{

width: 1000px;

height: auto;

background: lightsalmon;

margin: 200px auto 0 auto;

overflow: hidden;

}

.content .left{

float: left;

width: 150px;

}

.content .right{

float: right;

width: 240px;

}

.content .center{

float: left;

width: 600px;

height: 168px;

background: url(../images/comment.png) no-repeat 0 0;

background-size: 600px 168px;

}

.center .comment{

width: 580px;

height: 73px;

margin-left: 15px;

margin-top: 45px;

/* background: red; */

resize: none;

border: none;

outline: none;

}

.center .send{

width: 82px;

height: 30px;

margin-top: 4px;

margin-left: 506px;

border: none;

background: #FD8040;

color: white;

}

.content .messageList{

width: 600px;

/* height: auto; */

background: white;

float: left;

}

.messageList .info{

padding: 10px 20px;

border-bottom: 2px #CCCCCC solid;

}

.messageList .infoText{

line-height: 25px;

margin-bottom: 10px;

}

.info .infoOperation{

width: 100%;

overflow: hidden;

}

.infoOperation .infoTime{

float: left;

font-size: 13px;

color: #CCCCCC;

}

.infoOperation .infoHandle{

float: right;

font-size: 13px;

}

.infoHandle a{

text-decoration: none;

color: #CCCCCC;

background: url(../images/icons.png) no-repeat 0 0;

padding-left: 25px;

margin-left: 10px;

}

.infoHandle a:nth-child(2){

background-position: 0 -17px;

}

.infoHandle a:nth-child(3){

background-position: 0 -33px;

}

.page{

width: 1000px;

height: 40px;

background: #9F5024;

margin: 0 auto;

text-align: right;

padding: 10px;

box-sizing: border-box;

}

.page a{

text-decoration: none;

display: inline-block;

width: 20px;

height: 20px;

border: 1px solid #CCCCCC;

text-align: center;

line-height: 20px;

color: #2B2B2B;

}JavaScript

代码语言：javascript复制$(function() {

//0.监听内容的时时输入

$("body").delegate(".comment", "propertychange input", function() {

//判断是否输入了内容

if ($(this).val().length > 0) {

//让按钮可用

$(".send").prop("disabled", false);

console.log("按钮可用")

} else {

//让按钮不可用

$(".send").prop("disabled", true);

}

})

//1.监听发布按钮

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

//拿到用户输入的内容

var $text = $(".comment").val();

//根据内容创建节点

var $weibo = createEle($text);

//插入微博

$(".messageList").prepend($weibo);

});

//2.监听顶点击

$("body").delegate(".infoTop","click",function(){

$(this).text(parseInt($(this).text())+1);

});

$("body").delegate(".infoDown","click",function(){

$(this).text(parseInt($(this).text())+1);

});

$("body").delegate(".infoDelete","click",function(){

$(this).parents(".info").remove();

});

//创建节点的方法

function createEle(text) {

var $weibo = $("

");

return $weibo;

};

//生成时间的方法

function formartDate(){

var date=new Date();

var time=[date.getFullYear()+"-",date.getMonth()+1+"-",

date.getDate()+" ",

date.getHours()+":",

date.getMinutes()+":",

date.getSeconds()]

//数组转字符串

return time.join("");

}

})实现效果