2. Animación jQuery
Animación básica
- show () mostrará elementos ocultos
- hide () oculta los elementos visibles.
- toggle () se oculta cuando está visible y lo muestra cuando no está visible. Cambiar
Fade in y fade out animación
- fadeIn () fade in (lentamente visible)
- fadeOut () se desvanecen (desaparecen lentamente)
- fadeToggle () Fade in / out. Cambiar
- fadeTo () modifica lentamente la transparencia al valor especificado dentro del tiempo especificado. 0 transparente, 1 completo visible, 0,5 translúcido
Además de 7, los métodos de animación anteriores tienen dos parámetros, puede agregar uno, dos o no.
- El primer parámetro es la duración de la ejecución de la animación, en milisegundos.
- El segundo parámetro es la función de devolución de llamada de la animación (una función que se llama automáticamente después de que se completa la animación)
$("#div1").show( 2000 , function () { alert("show动画完成 ") } );
El método 7 tiene tres parámetros: 0 transparente, 1 visible completo y 0,5 semitransparente.
$("#btn7").click(function(){ $("#div1").fadeTo( 2000 , 0.5 ,function () { alert('fadeTo完成 ') });
Presentación del caso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</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">淡化切换fadeToggle()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化到fadeTo()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: yellow;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
Efecto de interfaz:
Prueba de ejemplo:
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.显示 show()
$("#btn1").click(function () {
//$("#div1").show();
//$("#div1").show(2000);
$("#div1").show(2000,function () {
alert("show动画完成 ")
}); //后面的2 3 4 5 6都可以有这三种调用形式
});
//2.隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide动画 执行完成 ")
});
});
//3.切换 toggle()
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle动画 完成 ")
});
});
//4.淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//5.淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//6.淡化切换 fadeToggle()
$("#btn6").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
//7.淡化到 fadeTo()
$("#btn7").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
});
</script>
Con respecto a la función del interruptor de palanca, puede cambiar continuamente para lograr efectos de animación:
La forma de lograr un cambio constante es volver a llamarse a sí mismo después de la ejecución.
<script type="text/javascript">
$(function () {
var dynamicMov = function () {
$("#div1").toggle(1000,dynamicMov); //写dynamicMov() 错
} 自己不断调用自己
dynamicMov();
</script>