El efecto slideUp de jQuery oculta el elemento deslizándolo hacia arriba, mientras que slideDown muestra el elemento. Quiero mostrar mi div usando slideUp. alguien me puede orientar? Gracias
$("div").click(function () { $(this).hide("slide", { direction: "down" }, 1000); });Es un poco más complejo que simplemente decir slideUpShow() o algo así, pero aún puedes hacerlo. Este es un ejemplo bastante simple, por lo que es posible que encuentre algunos casos extremos que necesiten abordarse.
$("#show-animate-up").on("click", function () { var div = $("div:not(:visible)"); var height = div.css({ display: "block" }).height(); div.css({ overflow: "hidden", marginTop: height, height: 0 }).animate({ marginTop: 0, height: height }, 500, function () { $(this).css({ display: "", overflow: "", height: "", marginTop: "" }); }); }); Aquí hay un violín que muestra los métodos slideUp / slideDown , los mismos efectos usando animate y una versión modificada usando animate que va en reversa: http://jsfiddle.net/sd7zsyhe/1/
Dado que animate es una función jQuery integrada, no es necesario que incluya jQuery UI.
Para obtener lo contrario de slideUp y slideDown. Agregue estas dos funciones a jQuery.
$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); } $.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }