Effet aveugle de jQuery UI – révéler par le bas

L’effet recherché est un peu délicat à réaliser, mais vous pouvez le faire même sans élément wrapper.

Le principal problème ici est que les éléments rendent naturellement de haut en bas, et non de bas en haut. L’animation des propriétés CSS de top et de height d’un élément relativement positionné nous permet d’implémenter un effet de glissement, mais l’élément restituera toujours le rendu de haut en bas:

 +-------------------------------------------+ | | ^ | | | Hidden area collapses upwards. | | | +-------------------------------------------+ <-- 'top' | | ^ | | Upper part of element (visible). | | | | | | Animation goes bottom-up. | | Element still renders top-down. | | | | | | +--|----------------------------------------+ <-- 'top + height' | | | | | | Lower part of element (hidden). | | | V | | +-------------------------------------------+ 

Si nous voulons simuler un rendu de bas en haut, nous devons modifier la propriété scrollTop de l'élément pendant l'animation, afin que sa partie inférieure rest toujours en vue:

 +-------------------------------------------+ | | ^ | | Upper part of element (hidden). | | Hidden area collapses upwards. | | | | +--|----------------------------------------+ <-- 'top' and 'scrollTop' | | | ^ | | Element still renders top-down. | | | | | | Animation goes bottom-up. | | Lower part of element (visible). | | | V | | +-------------------------------------------+ <-- 'top + height' 

Nous pouvons utiliser animate () avec scrollTop , mais le faire en conjonction avec top et height ne fonctionnait pas correctement dans mes tests (je suppose que scrollTop est réinitialisé lorsque top ou height sont modifiés dans la première étape de l'animation, de sorte qu'ils restnt bloqués à 0 ).

Pour contourner ce scrollTop , nous pouvons gérer nous-mêmes scrollTop via la fonction step facultative que nous pouvons transmettre à animate() . Cette fonction est appelée avec deux arguments, now et fx , now est now la valeur actuelle de la propriété animée et fx est un object wrapper autour d'informations utiles, comme l'élément et la propriété en cours d'animation.

Puisque nous voulons toujours que scrollTop soit identique à top , nous n'avons à tester que si top est animé dans notre fonction step . Si tel est le cas, nous définissons scrollTop sur now . Cette solution donne des résultats acceptables, même si elle scintille un peu trop à mon goût (cela pourrait être un artefact de mon navigateur, cependant).

Donc, en résumé, pour appliquer cet effet, nous devons:

• Récupérer la hauteur d'origine de l'élément,
• Définissez la position: relative; l'élément position: relative; afin que nous puissions animer sa propriété top ,
• Réduisez l'élément en définissant top à la hauteur d'origine et une height à 0 ,
• Montrer l'élément (nécessaire dans votre violon puisque display: none; est appliqué),
• Animer top to 0 et height à la hauteur d'origine,
• Donnez à scrollTop la valeur top de chaque étape de l'animation.

Résultat dans le code suivant:

 $("#click").click(function() { var $revealMe = $("#revealMe"); var originalHeight = $revealMe.height(); $revealMe.css({ position: "relative", top: originalHeight, height: 0 }).show().animate({ top: 0, height: originalHeight }, { duration: 1000, step: function(now, fx) { if (fx.prop == "top") { $(fx.elem).scrollTop(now); } } }); }); 

Vous pouvez le tester dans ce violon .

Que diriez-vous au lieu d’aveugle, en utilisant slide avec une option de direction? Voici un exemple jsFiddle .

jQuery:

 $( "#effect" ).show( 'slide', { direction: "down" } , 500); 

Si vous êtes d’accord, vous pouvez utiliser la bibliothèque d’interface utilisateur JQuery:

 $("div").hide("blind", {"direction": "down"}); $("div").show("blind", {"direction": "down"}); 

Est-ce que cela ne fait pas l’affaire?

 $("div").show('blind', {}, 'slow'); 

Blind Effect direction par défaut: "up" .

Valeurs possibles: up , down , left , right , vertical , horizontal .

Documentation

Exemple:

 $( document ).click(function() { $( "#toggle" ).toggle( "blind", {"direction": "down"}, 1000 ); }); 

 #toggle { width: 100px; height: 100px; background: #ccc; } 

    
Click anywhere to toggle the box.