javascript - remove - slideup is not a function
jQuery slideUp para mostrar el elemento y no ocultar. (8)
El efecto slideUp de jQuery oculta el elemento deslizándolo hacia arriba, mientras slideDown muestra el elemento. Quiero mostrar mi div usando slideUp. ¿Alguien puede guiarme? Gracias
A pesar del nombre, slideDown puede deslizar tu elemento en ambos sentidos. Use la posición absoluta si es necesario para animar dentro del elemento padre:
#slideup {
position:fixed;
bottom:0;
background:#0243c9;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
#littleslideup {
position:absolute;
bottom:0;
background:#000;
color:#fff;
display:none;
padding:10px;
z-index:100;
}
#slidedown {
position:fixed;
top:0;
background:#c94333;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
button {
display:inline-block;
font-size:16px;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative">This amounts to 70% of the total timber stand area of the region (not including the dwarf pine and shrubby alder) and is more than the total area of all other stone birch forests growing in the Magadan, Khabarovsk, Primorye and Sakhalin regions and other areas of its distribution.
<div id="littleslideup">Absolute-positioned element</div>
</div>
<span style="color:red">Click >> </span>
<button onclick="jQuery(''#slideup'').slideDown(1500);" >"Slideup"</button>
<button onclick="jQuery(''#slidedown'').slideDown(1500);" >"Slidedown"</button>
<button onclick="jQuery(''#littleslideup'').slideDown(1500);">"Slideup" inside element</button>
<div>Finally, closing the subject of volcanic activity, it must be said that the stone birch stands by its functional reaction quite adequately in order to re ect the character and intensity of the physical, chemical and thermic processes, stipulated by volcanism as well as the in uence upon biota and ecosystems.</div>
<div id="slideup">Could be a bottom cookie warning bar</div>
<div id="slidedown">Could be a top cookie warning bar</div>
Encontré una manera difícil ...
puede configurar div con el estilo de css inferior: 0px, agregar llamada
$("#div).slideDown();
se mostrará con el efecto slideUp-to-show que desee.
Es un poco más complejo que simplemente decir slideUpShow() o algo así, pero todavía puedes hacerlo. Este es un ejemplo bastante simple, por lo que puede encontrar algunos casos de borde que necesitan direccionamiento.
$("#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 que usan animate y una versión modificada que usa animate que se invierte: http://jsfiddle.net/sd7zsyhe/1/
Dado que animate es una función jQuery incorporada, no es necesario que incluya jQuery UI.
Para aquellos que no usan la interfaz de usuario de Jquery pero desean agregar la función a la Biblioteca de Jquery:
jQuery.fn.slideUpShow = function (time,callback) {
if (!time)
time = 200;
var o = $(this[0]) // It''s your element
if (o.is('':hidden''))
{
var height = o.css({
display: "block"
}).height();
o.css({
overflow: "hidden",
marginTop: height,
height: 0
}).animate({
marginTop: 0,
height: height
}, time, function () {
$(this).css({
display: "",
overflow: "",
height: "",
marginTop: ""
});
if (callback)
callback();
});
}
return this; // This is needed so others can keep chaining off of this
};
jQuery.fn.slideDownHide = function (time,callback) {
if (!time)
time = 200;
var o = $(this[0]) // It''s your element
if (o.is('':visible'')) {
var height = o.height();
o.css({
overflow: "hidden",
marginTop: 0,
height: height
}).animate({
marginTop: height,
height: 0
}, time, function () {
$(this).css({
display: "none",
overflow: "",
height: "",
marginTop: ""
});
if (callback)
callback();
});
}
return this;
}
Créditos: @redbmk respuesta
Para obtener el opuesto de slideUp y slideDown. Agrega estas dos funciones a jQuery.
$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }
Este efecto de conmutación es sólo para arriba y abajo. Jquery UI es para cualquier otra dirección.
Tengo algunos votos negativos, así que revisé mi respuesta y, de hecho, no respondí correctamente la pregunta OP, lo siento. Así que voy a tratar de arreglar eso.
Primero, el método slideUp() en JQuery pretende ocultar el elemento en lugar de revelarlo. Es básicamente lo opuesto a slideDown() que muestra su elemento deslizándolo hacia abajo.
Sabiendo que creo que estamos de acuerdo en que no hay una función mágica allí mismo para hacer un efecto de deslizamiento hacia arriba para mostrar un elemento (en JQuery).
Por lo tanto, tenemos que hacer un poco de trabajo para obtener lo que necesitamos: efecto deslizador hacia arriba. Descubrí algunas soluciones y aquí hay una que creo que es fácil de implementar:
https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal
La solución anterior funciona con el evento de desplazamiento, para el evento de clic pruebe este código modificado:
http://jsfiddle.net/D7uT9/250/
La respuesta dada por @redbmk también es una solución de trabajo.
Lo siento por mi malentendido la primera vez.
ANTIGUA RESPUESTA
Es una publicación antigua, pero si alguien está buscando una solución, esta es mi recomendación.
Ahora podemos usar slideToggle() para lograr este efecto (sin la necesidad de jQuery UI).
$(".btn").click(function () {
$("div").slideToggle();
});
Documentación: http://api.jquery.com/slidetoggle/
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});