jQuery slideDown vs. jQuery UI .show ('slide')

Question

Estoy tratando de utilizar la funcionalidad incorporada de jQuery para crear un "cajón" que se desliza desde detrás de una barra de navegación, empujando el contenido que está debajo del mismo fuera del camino.

Si uso $('#drawer').slideDown(), el contenido se elimina, pero el contenido no se "desliza hacia abajo". Es más bien una limpieza para revelar el contenido.

Si uso $('#drawer').show('slide',{direction:'up'}), el contenido se desliza hacia abajo correctamente, pero todo el contenido debajo del elemento se salta antes de que ocurra el efecto.

¿Existe alguna manera de combinar lo mejor de ambos para reproducir el efecto que estoy buscando: un cajón que se deslice hacia afuera, empujando hacia afuera el contenido que está debajo?

Investigué la función .animate() de jQuery UI, pero la documentación no es útil. Mis crudos esfuerzos para utilizarlo han estado llenos de fracaso.

Y, por si alguien le pregunta, lo siento, no puedo mostrar un ejemplo, pero nos gustaría que funcione como el plugin de jQuery cajón:

http://lib.metatype.jp/jquery_drawer/sample.html

Pero ese plugin no hace todo lo que necesitamos, de lo contrario solo usaría eso (sin usar una lista con viñetas o contenido AJAX). El efecto es lo que queremos, sin embargo.

ACTUALIZACIÓN: También he intentado esta parte del código a través del plugin de jQuery cajón, pero no animar a todos:

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 }); 

Para aclarar, también, esto se llama dentro de una función que OpenDrawer() se llama así:

$(document).ready(function() { 
    OpenDrawer(); 
}); 

Porque de forma predeterminada se cargará cuando se cargue la página.

Answer 1

Sí, es como el comportamiento del acordeón, excepto que también puede deslizarlo hacia arriba. He usado esta funcionalidad para crear lo que creo que estás buscando.

$('#drawer').slideDown('slow');

Al cambiar la velocidad que puede obtener diferentes velocidades de deslizamiento para buscar la forma que desee. Ahora, a pesar de que tiene el elemento del cajón, necesita un contenedor que inicialmente está oculto, que es lo que se deslizará. Digamos que tiene un botón con una identificación de "cajón" y un contenedor con una identificación de "myDrawerContent". Se podría hacer lo siguiente,

$('#drawer').click(function() { 
    $('#myDrawerContent').slideDown('slow'); 
} 

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function() { $('#drw_loader').fadeOut(function() { $('#drw_ajax').fadeIn(); }); 
}); 

Espero que esto ayude.

Metropolis

Answer 2

El javascript que tiene en su actualización pregunta funciona, pero que necesita para operar en un elemento que contiene su contenido más que el propio contenido.

Para ver esto en acción, rodear el elemento #drawer con otro div:

<div id='container'> 
    <div id='drawer'>...</div> 
<div> 

y animar el contenedor:

$('#container') 
    .css({ marginTop: $('#container').height() * -1 }) 
    .animate({ marginTop: 0 }); 

Answer 3

Creo que usted está buscando un efecto más como 'ciego ':

$('#drawer').show('blind'); 

Es extraño que $ .fn.slideDown () y $ .fn.show ('slide') no funcionan de la misma manera, sino que 'ciegos' sí. 'deslizar' crea un marcador de posición del tamaño de su objeto y luego se desliza dentro del marco de visión, mientras que ciega ajusta la altura o el ancho de su elemento hasta que se expande al tamaño correcto (mientras que el desbordamiento está configurado como oculto). De hecho, los nombres de los efectos son correctos, pero existe cierta confusión debido al nombre heredado $ .fn.slideDown().

Answer 4

Es una publicación tardía, pero me encontré con este problema y logré hacer algo que funciona.

No soy un gurú de jQuery o Javascript, así que no seas duro con esta solución rápida.

Aquí hay un pequeño ejemplo. Debe respetarse el orden de los efectos. Puede jugar con la duración del tiempo de animación para tener un efecto de dibujo realmente agradable.

acaba rápidamente he comprobado en FF 3.6

Puede probar el ejemplo del código de Google parque infantil. http://code.google.com/apis/ajax/playground/#jqueryui

Haga clic en editar html, pegue el código y haga clic en ejecutar código. El ejemplo debería estar trabajando

esperanza de que va a ayudar a

<html> 
<head> 
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>--> 
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    </script> 
</head> 
<body> 
<script> 
jQuery(function() 
{ 
    // We bind the <a>I'm the push link!</a> click event to the toggle function 
    $("#topPart a").click(function() 
             { 
              toggleSlide(this); 
             });     
}); 
function toggleSlide(element) 
{ 
    var drawer = jQuery("#drawer"); 
    var content = jQuery("#drawerContent"); 
    if (jQuery(content).is(":hidden")) 
    { 
     // The order here is important, we must slide juste before starting blinding 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490); 

        },1); 
    } 
    else 
    { 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500); 
         // The previous blind effect hide the drawer 
         // However we want it to be shown again, if not the next "drawer opening effect" won't play 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460); 
        },1); 
    } 
} 

</script> 

    <div id="topPart"> 
     <a href="javascript:void(0)">I'm the push link!</a> 
    </div> 
    <div id="drawer"> 
     <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, .... 
     </p> 
     <p> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     </div> 
    </div> 
    <div id="bottomPart"> 
    I want to be pushed nicely 
    </div> 
</body> 
</html> 

Answer 5

He estado buscando una aplicación decente de este efecto (aparentemente simple) también, y esto es lo mejor que he encontrado : http://eric.muyser.com/work/jquery/drawer/example/

Ver aquí para más información/código/etc: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

Sin embargo, todavía parece una exageración y necesita ser hervida abajo en una Complemento de animación de esencia desnuda que se puede llamar/aplicar a través de .show(), que es precisamente lo que esperarías que ya estuviera presente en jQuery/UI como estándar en primer lugar ... pero lamentablemente no es ...