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

Question

J'essaie d'utiliser la fonction d'effet intégrée de jQuery pour créer un "tiroir" qui glisse derrière une barre de navigation, repoussant le contenu en dessous de la façon.

Si j'utilise $('#drawer').slideDown(), le contenu est déplacé, mais le contenu ne "glisse" pas réellement. C'est plus un effacement pour révéler le contenu. Si j'utilise $('#drawer').show('slide',{direction:'up'}), le contenu glisse correctement, mais tout le contenu sous l'élément saute avant que l'effet ne se produise.

Existe-t-il un moyen de combiner le meilleur des deux pour reproduire l'effet que je recherche: un tiroir qui glisse, repoussant le contenu en dessous?

J'ai analysé la fonction .animate() de jQuery UI, mais la documentation n'est pas utile. Mes efforts grossiers pour l'utiliser ont été lourd d'échec.

Et, au cas où quelqu'un demande, désolé, je ne peux pas montrer un exemple, mais nous aimerions qu'il fonctionne comme le plugin jQuery tiroir:

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

Mais ce plugin ne fait pas tout à fait ce dont nous avons besoin non plus, sinon je l'utiliserais simplement (sans utiliser de liste à puces ou de contenu AJAX). L'effet là est ce que nous voulons, cependant.

MISE À JOUR: J'ai aussi essayé cette partie du code via le plug-in tiroir jQuery, mais il ne sont pas animés du tout:

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

Pour clarifier les choses, aussi, on appelle cela dans une fonction OpenDrawer() que est appelé ainsi:

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

Parce que par défaut, il se chargera lorsque la page se charge.

Answer 1

Oui, c'est comme le comportement de l'accordéon sauf que vous pouvez également le faire glisser vers le haut. J'ai utilisé cette fonctionnalité pour créer ce que je pense que vous recherchez.

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

En changeant la vitesse que vous pouvez obtenir des vitesses de glissement pour regarder la façon dont vous le voulez. Maintenant, même si vous avez l'élément tiroir, vous avez besoin d'un conteneur qui est initialement caché, ce qui va glisser. Disons que vous avez un bouton avec un identifiant de "tiroir", et un conteneur avec un identifiant de "myDrawerContent". Vous procédez comme suit,

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

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

Hope this helps.

Metropolis

Answer 2

Le javascript que vous avez dans votre mise à jour de question fonctionne, mais il doit fonctionner sur un élément contenant votre contenu plutôt que le contenu lui-même.

Pour voir en action, entourer l'élément #drawer avec un autre div:

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

et animez le contenant:

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

Answer 3

Je crois que vous êtes à la recherche d'un effet plus comme « aveugle ':

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

Il est étrange que $ .fn.slideDown () et $ .fn.show ('slide') ne fonctionnent pas de la même manière, mais plutôt 'aveugle'. 'slide' crée un espace réservé de la taille de votre objet puis glisse dans le cadre de la vue, tandis que aveugle ajuste la hauteur ou la largeur de votre élément jusqu'à ce qu'il atteigne la bonne taille (alors que overflow est masqué). Donc, en réalité, les noms d'effets sont corrects, mais il y a une certaine confusion à cause du nom patrimonial $ .fn.slideDown().

Answer 4

C'est un post tardif, mais j'ai rencontré ce problème et j'ai réussi à faire quelque chose qui fonctionne.

Je ne suis pas un gourou jQuery ou JavaScript alors ne soyez pas dur avec cette solution rapide.

Voici un petit exemple. L'ordre des effets doit être respecté. Vous pouvez jouer avec la durée de l'animation pour avoir un très bel effet de dessin.

Je viens rapidement testé sur FF 3.6

Vous pouvez l'exemple sur le terrain de jeu de code google. http://code.google.com/apis/ajax/playground/#jqueryui

Cliquez sur modifier html, collez le code et cliquez sur exécuter le code. L'exemple devrait fonctionner

Je espère que ça va aider

<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

J'ai cherché un effet de mise en œuvre correcte de cette (apparemment simple) aussi, et cela est le meilleur que j'ai trouvé : http://eric.muyser.com/work/jquery/drawer/example/

Voir ici pour plus d'informations/code/etc: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

Cependant, il semble encore exagéré et doit être bouillie en une plugin d'animation essence pure qui peut être appelé/appliqué via .show(), ce qui est précisément ce que vous attendez d'être déjà présent dans jQuery/UI en standard ... mais ce n'est malheureusement pas le cas ...