Animação básica
show () mostrará
os elementos ocultos e
hide () ocultará os
elementos visíveis.
Toggle ()
oculta quando está visível e mostra quando não está visível.
Todos os métodos de animação acima podem adicionar parâmetros.
1. O primeiro parâmetro é a duração da animação, em milissegundos.
2. O segundo parâmetro é a função de retorno de chamada da animação (uma função que é chamada automaticamente após a conclusão da animação)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
});
</script>
</head>
<body>
<table style="float: left">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div
id="div1"
style="
float: left;
border: 1px solid;
background-color: blue;
width: 300px;
height: 200px;
"
>
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
Fade in e fade out animação
fadeIn ()
fade in (lentamente visível)
fadeOut ()
fade out (desaparece lentamente)
fadeTo ()
modifica lentamente a transparência para o valor especificado dentro do tempo especificado. 0 transparente, 1 totalmente visível, 0,5 translúcido
fadeToggle () botão de
fade in / fade out
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
//淡入 fadeIn()
$("#btn4").click(function () {
$("#div1").fadeIn(1000, function () {
alert("淡入完成");
});
});
//淡出 fadeOut()
$("#btn5").click(function () {
$("#div1").fadeOut(1000, function () {
alert("淡出完成");
});
});
//淡化到 fadeTo()
$("#btn6").click(function () {
$("#div1").fadeTo(1000, 0.3, function () {
alert("淡化到完成");
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function () {
$("#div1").fadeToggle(1000, abd);
});
var abd = function () {
$("#div1").fadeToggle(1000, abd);
};
});
</script>
Vá para a operação de evento jQuery