<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本动画效果</title>
</head>
<script type="text/javascript"></script>
<script type="text/javascript">
function f1 () {
//隐藏效果
//$().hide(速度,回调函数)
/*$('div').hide();
$('div').hide(3000);
$('div').hide(3000,function(){
alert("aaaaaa");
});*/
$('div').fadeOut();
$('div').fadeOut(2000);//透明度渐变
}
function f2 () {
//显示效果
/*$('div').show();
$('div').show(3000);
$('div').show(3000,function(){
alert("bbbbb");
});*/
$('div').fadeIn();
$('div').fadeIn(2000);
}
function f3 () {
//开关效果
//$('div').toggle();
/*$('div').toggle(2000);
$('div').toggle(false);*/
$('div').fadeToggle();
$('div').fadeToggle(3000);
}
function f4 () {
//垂直动画效果
//显示
/*$('div').slideUp();
$('div').slideUp(3000);
//隐藏
$('div').slideDown();
$('div').slideDown(3000);*/
$('div').slideToggle();
$('div').slideToggle(3000);
$('div').slideToggle(2000,f4);//可以重复调用
}
function f5 () {
//透明度设置--透明度在0--1之间
//$('div').fadeTo(2000,透明度,回调函数)
$('div').fadeTo(3000,0.3);
}
</script>
<style type="text/css">
div{
color: red;
font-size: 20px;
background-color: lawngreen;
}
</style>
<body>
<div>good good study ,day day up!</div>
<input type="button" onclick="f1()" value="隐藏"/>
<input type="button" onclick="f2()" value="显示"/>
<input type="button" onclick="f3()" value="开关"/>
<input type="button" onclick="f4()" value="垂直动画"/>
<input type="button" onclick="f5()" value="设置透明度"/>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>基本动画效果</title>
</head>
<script type="text/javascript"></script>
<script type="text/javascript">
function f1 () {
//隐藏效果
//$().hide(速度,回调函数)
/*$('div').hide();
$('div').hide(3000);
$('div').hide(3000,function(){
alert("aaaaaa");
});*/
$('div').fadeOut();
$('div').fadeOut(2000);//透明度渐变
}
function f2 () {
//显示效果
/*$('div').show();
$('div').show(3000);
$('div').show(3000,function(){
alert("bbbbb");
});*/
$('div').fadeIn();
$('div').fadeIn(2000);
}
function f3 () {
//开关效果
//$('div').toggle();
/*$('div').toggle(2000);
$('div').toggle(false);*/
$('div').fadeToggle();
$('div').fadeToggle(3000);
}
function f4 () {
//垂直动画效果
//显示
/*$('div').slideUp();
$('div').slideUp(3000);
//隐藏
$('div').slideDown();
$('div').slideDown(3000);*/
$('div').slideToggle();
$('div').slideToggle(3000);
$('div').slideToggle(2000,f4);//可以重复调用
}
function f5 () {
//透明度设置--透明度在0--1之间
//$('div').fadeTo(2000,透明度,回调函数)
$('div').fadeTo(3000,0.3);
}
</script>
<style type="text/css">
div{
color: red;
font-size: 20px;
background-color: lawngreen;
}
</style>
<body>
<div>good good study ,day day up!</div>
<input type="button" onclick="f1()" value="隐藏"/>
<input type="button" onclick="f2()" value="显示"/>
<input type="button" onclick="f3()" value="开关"/>
<input type="button" onclick="f4()" value="垂直动画"/>
<input type="button" onclick="f5()" value="设置透明度"/>
</body>
</html>