Ejercicios con Jquery
Ejercicio Descripcion Código Acción Ejemplo en accion
1 Mover a la derecha $(this).closest("tr").find(".rombo-base").animate({marginLeft: "50px"}, 400).delay(2000).animate({marginLeft: "0px"}, 400)
2 Estirar de ancho $(this).closest("tr").find(".rombo-base").animate({width: "90px"}, 400).delay(2000).animate({width: "30px"}, 400)
3 Girar la figura completa $(this).closest("tr").find(".rombo-base").css("transform", "rotate(180deg)").delay(2000).queue(function(n){$(this).css("transform","none");n();})
4 Mover hacia abajo $(this).closest("tr").find(".rombo-base").animate({marginTop: "20px"}, 400).delay(2000).animate({marginTop: "0px"}, 400)
5 Poner borde $(this).closest("tr").find(".rombo-base").css("border-width", "8px").delay(2000).queue(function(n){$(this).css("border-width","3px");n();})
6 Poner texto adentro de la figura var t = $(this).siblings("input").val(); $(this).closest("tr").find(".rombo-base").text(t)
7 Reemplazar figura con texto var t = $(this).siblings("input").val(); $(this).siblings("button").text(t); $(this).closest("tr").find("td:last").html("<div style='display:flex; justify-content:center; align-items:center; height:100%; font-size:14px;'>" + t + "</div>");
8 Poner texto en el fondo de la celda var t = $(this).siblings("input").val(); $(this).closest("tr").find("td:last").append("<p style='margin:0;font-size:10px;'>" + t + "</p>")
9 Cambiar color y texto con dropdown var c = $(this).siblings("select").val(); var t = $(this).siblings("select").find("option:selected").text(); $(this).closest("tr").find(".rombo-base").css("background-color", c).text(t);
10 Cambiar el titulo de la pagina var t = $(this).siblings("input").val(); $("title").text(t)
11 Cambiar el color de la fila var td = $(this).closest("tr").find("td"); td.css("background-color", "#000000"); setTimeout(function(){ td.css("background-color", "#ffffff"); }, 2000)
12 Ocultar la figura $(this).closest("tr").find(".rombo-base").hide().delay(2000).show(0)
13 Hacer la figura circulo var r = $(this).closest("tr").find(".rombo-base"); r.css("border-radius", "50%"); setTimeout(function(){ r.css("border-radius", "4px"); }, 2000)
14 Colorear var r = $(this).closest("tr").find(".rombo-base"); var bg = r.css("background-color"); var bc = r.css("border-color"); r.css({"background-color":"#cbd5e1","border-color":"#64748b"}); setTimeout(function(){ r.css({"background-color":bg,"border-color":bc}); }, 2000)
15 Esconder las otras filas var s = $(this).closest("tr").siblings(); s.hide(); setTimeout(function(){ s.show(); }, 3000)