jQuery 动画制作与特效

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

$(function(){
$("input:first").click(function(){
    $("p").hide(); //隐藏
});
$("input:last").click(function(){
    $("p").show(); //显示
});
});
</script>

HTML代码：

<input type="button" value="Hide"> <input type="button" value="Show">
<p>点击按钮，看看效果</p>
<span>一段其它的文字</span>

制作多级菜单

jQuery代码:

$(function(){
$("li:has(ul)").click(function(e){
    if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作
        if($(this).children().is(":hidden")){
        //如果子项是隐藏的则显示
        $(this).css("list-style-image","url(minus.gif)")
        .children().show();
        }else{
        //如果子项是显示的则隐藏
        $(this).css("list-style-image","url(plus.gif)")
        .children().hide();
        }
    }
    return false; //避免不必要的事件混绕
    }).css("cursor","pointer").click(); //加载时触发点击事件

    //对于没有子项的菜单，统一设置
    $("li:not(:has(ul))").css({
    "cursor":"default",
    "list-style-image":"none"
    });
});
</script>

HTML代码:

<ul>
<li>第1章 Javascript简介</li>
<li>第2章 Javascript基础</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
<li>第3.3节 CSS选择器</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 盒子模型</li>
<li>第4.3节 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>
</ul>
</li>
</ul>

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

$(function(){
    $("li:has(ul)").click(function(e){
    if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作
    $(this).children().toggle();
    $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
    }
    return false; //避免不必要的事件混绕
    }).css("cursor","pointer").click(); //加载时触发点击事件

    //对于没有子项的菜单，统一设置
    $("li:not(:has(ul))").css({
    "cursor":"default",
    "list-style-image":"none"
    });
    });
    同样利用toggle()方法以上实例也可以进一步简化: 推荐使用
    jQuery代码:
    $(function(){
    $("li").find("ul").prev().click(function(){
    $(this).next().toggle();
    });
    $("li:has(ul)").find("ul").hide();
});

HTML代码:

<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

$(function(){
    $("input:first").click(function(){
    $("img").hide(3000); //逐渐隐藏(大小)
    });
    $("input:last").click(function(){
    $("img").show(1000); //逐渐显示(大小)
    });
});

HTML代码：

<input type="button" value="Hide"> <input type="button" value="Show">
<p><img src="01.jpg"></p>

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

$(function(){
    $("li").find("ul").prev().click(function(){
    $(this).next().toggle(500); //逐渐的显隐
    });
    $("li:has(ul)").find("ul").hide();
});

HTML代码:

<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

$(function(){
    $("input:eq(0)").click(function(){
    $("img").fadeOut(3000); //逐渐fadeOut
    });
    $("input:eq(1)").click(function(){
    $("img").fadeIn(1000); //逐渐fadeIn
    });
    $("input:eq(2)").click(function(){
    $("img").hide(3000); //逐渐隐藏
    });
    $("input:eq(3)").click(function(){
    $("img").show(1000); //逐渐显示
    });
});

HTML代码:

<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="Hide">
<input type="button" value="Show">
<p><img src="02.jpg"></p>

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

$(function(){
    $("input:eq(0)").click(function(){
    $("img").fadeOut(1000);
    });
    $("input:eq(1)").click(function(){
    $("img").fadeIn(1000);
    });
    $("input:eq(2)").click(function(){
    $("img").fadeTo(1000,0.5);
    });
    $("input:eq(3)").click(function(){
    $("img").fadeTo(1000,0);
    });
});

HTML代码:

<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
<p><img src="03.jpg"></p>

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

$(function(){
$("input:eq(0)").click(function(){
$("div").add("img").slideUp(1000); //相当于$("div,img")
});
$("input:eq(1)").click(function(){
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function(){
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function(){
$("div").add("img").show(1000);
});
});

HTML代码:

<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>

jQuery 代码:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});

实例：阻止动画播放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 500px;
background-color: orange;
}
</style>
</head>
<body>
<button>动画bug</button>
<div></div>
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("button").click(function(){
//$("div").stop(true).slideToggle(); //stop(true)阻止重复点击播放

//第二种方法我们称之为函数节流
//我判断你是否在动画中 如果在我就直接终止代码 如果不在那么久继续
/*if(div是否在动画中){
return;
}*/

console.log($("div").is(":animated"));//这个就是判断div是否在动画过程中
if($("div").is(":animated")){
return; //函数节流
}

$("div").slideToggle(3000);

})
</script>
</body>
</html>

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
fieldset{
width: 800px;
margin: 0 auto;
}
ul{
margin: 20px;
height: 50px;
}
li{
width: 48px;
height: 48px;
float: left;
margin-right: -1px;
line-height: 48px;
text-align: center;
border: 1px solid #000;
}
</style>
</head>
<body>
<fieldset id="">
<legend>特效</legend>
<button>┏ (゜ω゜)=</button>
<ul>
<li>今</li>
<li>天</li>
<li>是</li>
<li>一</li>
<li>个</li>
<li>好</li>
<li>天</li>
<li>气</li>
</ul>
</fieldset>
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("button").click(function(){
/*$("li:eq(0)").slideToggle(function(){
$("li:eq(1)").slideToggle(function(){
$("li:eq(2)").slideToggle(function(){
$("li:eq(3)").slideToggle(function(){
$("li:eq(4)").slideToggle(function(){
$("li:eq(5)").slideToggle(function(){
$("li:eq(6)").slideToggle(function(){
$("li:eq(7)").slideToggle();
})
});
})
})
})
})
})*/
/*
$("li:eq(0)").slideToggle(function(){
//上述代码优化为
$(this).next().slideToggle(function fn(){
$(this).next().slideToggle(fn);
})
})
*/
$("li").each(function(index,ele){
$(this).delay(index*400).slideUp()
})
})
</script>
</body>
</html>

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

"slow", 缓慢

"normal", 正常

"fast" 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

"slow", 缓慢

"normal", 正常

"fast" 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。