[SOLUCIONADO] Slide Up. De abajo a arriba

juanote · #1 (**permalink**) 14/06/2013, 14:19

Estoy haciendo una animacion con slideup y slidedown.
El slide lo hace de arriba a abajo. Empieza mostrandose la parte de arriba hasta que se ve todo el objeto.
Yo quiero conseguir que cargue de abajo a arriba

He visto en una página que lo hace indistintamente; pero yo solo consigo hacerlo desde arriba a abajo.
La página: budenheim.com/es/ (aqui muestra las dos formas)

Mi pagina donde lo intento yo es garciadominguez.es/budenheim/es/, el apartado contactar lo debería hacer de abajo a arriba

ZoroRoronoa · #2 (**permalink**) 15/06/2013, 10:57

Debeais usar jQueryUI, el efectpo "slide" y los parametros direccionales que existen en los efectos ( toggle(), show(), hide() )

te dejo un ejemplo:

Código Javascript:

Ver original$(document).ready(function() {
$("#contacto").click(function() {
$(this).next(".miDivOculto").show("slide",{direction:"top", 3000});
});
});

Saludos!

juanote · #3 (**permalink**) 16/06/2013, 09:39

No me funciona bien lo que me sugieres

yo uso este metodo

Cita:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

ZoroRoronoa · #4 (**permalink**) 17/06/2013, 09:40

Y si te funciona tu metodo?

No estaba a la mano mis practicas, y peor, ando del movilCelular.

Por ahi puse mal mi codigo. TE LO CUELGO DE NUEVO.
Y antes debes de colgar en el HEAD el jquery (use la v 1.7.0)
y tbn el script d jqueryUI (use la v 1.10.3)

el code es este

//document ready
$("#miLink").click(function() {
$("#miSlider").show("slide", {direction: "down"}, 3000);
});
// fin del ready

*asegurate que "#miSlide" este con Display:none; (css)

PERDON pero ando del movil, espero entendais. Saludos.

juanote · #5 (**permalink**) 17/06/2013, 10:41

vi que te habias equivocado escribiendo
lo he solucionado gracias a tu aportación

ahora tengo otros problemas, pero esa parte la tengo bien

ZoroRoronoa · #6 (**permalink**) 17/06/2013, 11:56

Que otros problemas colega?
Son sobre jquery?

te dejo el ejemplo de lo anterior, es que me la pasaba solo en el Movil

http://kurosaki.host22.com/jqueryui/slider-downtop.html

juanote · #7 (**permalink**) 17/06/2013, 12:15

te explico por encima, no lo escribo correctamente, no te fijes en eso

mediante las imagenes llamo a las funciones
con la imagen a <img funcion1();>
con la imagen b <img funcion2();>

con las funciones ejecuto los slides
funcion1{
cap1.slide,show
capa2.slide.hide
}
funcion2{
cap2.slide,show
capa1.slide.hide
}

pero, necesito que dependiendo de una condicion, en la funcion 2, no haga el slide. Necesito una variablke global, que la cargue la funcion1 y que la testee la funcion2
quizas no me explico bien

garciadominguez.es/budenheim/es/
pinchas en el aparatado contactar, sin cerrar con la x; pulsas en el apartado safety, por ejemplo. debería bajar el slide de contactar. Eso lo quiero hacer con un condicional

ZoroRoronoa · #8 (**permalink**) 17/06/2013, 13:29

Estoy en el movil y me sucede que al abrir CONTACTAR y despues al pulsar SAFETY, se cierra contactar y se abre safety.

Lo que tu deceas es que ambos permanezcan abiertos? O me equivoco?

juanote · #9 (**permalink**) 17/06/2013, 14:07

Cita:

Iniciado por ZoroRoronoa

al abrir CONTACTAR y despues al pulsar SAFETY, se cierra contactar y se abre safety.

eso es lo que deseo, pero a mi no me funciona asi

juanote · #10 (**permalink**) 17/06/2013, 15:44

te voy a poner algo del codigo
los 5 botones que abren los slides
<div id="safety-mas"><img src="../img/mas-izq.png" alt="mas-izq" width="47" height="38" border="0" onclick="safebajar()" style="cursor:pointer" /></div>
<div id="science-mas"><img src="../img/mas-der.png" alt="mas-der" width="47" height="38" border="0" onclick="sciencebajar()" style="cursor:pointer" /></div>
<div id="seafood-mas"><img src="../img/mas-der.png" alt="mas-der" width="47" height="38" border="0" onclick="seafoodbajar()" style="cursor:pointer" /></div>
<div id="sucess-mas"><img src="../img/mas-izq.png" alt="mas-izq" width="47" height="38" border="0" onclick="sucessbajar()" style="cursor:pointer" /></div>
<div id="contact-mas"><img src="../img/mas-inf.png" alt="mas-izq" width="47" height="38" border="0" onclick="contactbajar(1)" style="cursor:pointer" /></div>

las funciones
function safebajar() {
$(document).ready(function(){
$("#safety-mas").hide();
$("#safety-caja").slideDown(700);
$("#safety-caja").show(1000) ;
$("#sucess-mas").show(1000) ;
$("#science-mas").show(1000) ;
$("#seafood-mas").show(1000) ;
$("#contact-mas").show(1000) ;
$("#sucess-caja").slideUp(500);
$("#science-caja").slideUp(500);
$("#seafood-caja").slideUp(500);
/*$("#contact-caja").hide( "slide", {direction: "down"}, 500 );*/

});
}
function sucessbajar() {
$(document).ready(function(){
$("#sucess-mas").hide();
$("#sucess-caja").slideDown(700);
$("#safety-caja").slideUp(500);
$("#science-caja").slideUp(500);
$("#seafood-caja").slideUp(500);
/*$("#contact-caja").hide( "slide", {direction: "down"}, 500 );*/
$("#safety-mas").show(1000) ;
$("#science-mas").show(1000) ;
$("#seafood-mas").show(1000) ;
$("#contact-mas").show(1000) ;
});
}
function sciencebajar() {
$(document).ready(function(){
$("#science-mas").hide();
$("#science-caja").slideDown(700);
$("#safety-caja").slideUp(500);
$("#sucess-caja").slideUp(500);
$("#seafood-caja").slideUp(500);
/*$("#contact-caja").hide( "slide", {direction: "down"}, 500 );*/
$("#safety-mas").show(1000) ;
$("#sucess-mas").show(1000) ;
$("#seafood-mas").show(1000) ;
$("#contact-mas").show(1000) ;
});
}
function seafoodbajar() {
$(document).ready(function(){
$("#seafood-mas").hide();
$("#seafood-caja").slideDown(700);
$("#safety-caja").slideUp(500);
$("#sucess-caja").slideUp(500);
$("#science-caja").slideUp(500);
$("#safety-mas").show(1000) ;
$("#sucess-mas").show(1000) ;
$("#science-mas").show(1000) ;
$("#contact-mas").show(1000) ;
if(variableGlobal == 1)
{$("#contact-caja").hide( "slide", {direction: "down"}, 500 );}
});
}
function contactbajar(resultado) {
$(document).ready(function(){
$("#contact-mas").hide();
$("#contact-caja").show( "slide", {direction: "down"}, 700 );
$("#safety-caja").slideUp(500);
$("#sucess-caja").slideUp(500);
$("#science-caja").slideUp(500);
$("#seafood-caja").slideUp(500);
$("#safety-mas").show(1000) ;
$("#sucess-mas").show(1000) ;
$("#science-mas").show(1000) ;
$("#seafood-mas").show(1000) ;
var variableGlobal = resultado;
return variableGlobal;

});
}

lo marcado en rojo es lo que quiero conseguir