Quel est cet effet web?

Je ne sais pas si c'est ce qu'ils utilisent, mais les animations de transition CSS3 seraient simples, pas de programmation pour le faire.

Un exemple vraiment simple de ce que vous êtes après est ici http://jsfiddle.net/RjpLt/

C'est assez pour vous faire démarrer.

METTRE À JOUR

Maintenant avec des animations ccs: http://jsfiddle.net/RjpLt/1/

En un mot:

Lorsque le popup est déclenché, un <div> avec le contenu approprié est ajouté dynamiquement quelque part à l'intérieur du DOM (les positions Javascript les plus susceptibles de créer le popup ainsi que le créer). Cet élément commence petit et est ensuite animé par ses dimensions finales. Pendant ce temps, les règles CSS spécifient l'apparence visuelle du popup. Lorsque la souris quitte la zone de fenêtrage, le <div> est retiré du DOM, ce qui fait que la popup disparaît.

Je suis sûr qu'il utilise jQuery, et je parie que c'est "animé":

http://api.jquery.com/animate/

Le style animé est probablement la taille et la couleur d'arrière-plan, ainsi que d'autres choses qui se passent dans la région.

Je pense que c'est un simple $('#container).show('slow');

Comme vous avez posé une image statique, il est difficile de dire ce qui se passe exactement. Voici ma supposition:

Il utilise le Hover pour déclencher les événements: http://api.jquery.com/hover/

Ensuite, affiche pour afficher une div cachée: http://api.jquery.com/show/

Quelque chose comme:

 $('a.show-profile').hover(function(){ $('#profile').show(); }); 

Le #profile devrait être caché à l'avance via css "display: none" ou $ ('# profile'). Hide (); http://api.jquery.com/hide/

Ma supposition est (à partir de la source):

StackExchange.helpers.MagicPopup({selector:".user-hover .user-gravatar48, .user-hover .user-gravatar32"

$(b).closest(".user-hover").find(".user-details a").attr("href"));return!b?null:"/users/user-info/"+b[1]},cache:!0,id:"user-menu",showing:f,removed:c}))}}}();

b.fadeOutAndRemove()):setTimeout(p,500)};b.animate({width:j,height:a,top:f.top+k.top},200,p);

Mais comme je l'ai dit, je suis nouveau pour cela, il pourrait même ne pas être lié, mais c'est un Animated onmouseover on the gravatar .

J'ai créé 2 solutions:

Démo jsBin

• Indiquez dynamiquement une carte DIV avec tout le contenu pertinent.
• Éliminez les contenus, les paragraphes ou les éléments indésirables à l'aide de l' display:none dans le CSS
• Une seule carte 'BIG' changera sa position sur la page, clonera et révélera le contenu FULL sur le vol stationnaire – Préparation du CSS pour cet élément à display:block; Tous les contenus.

Sur le vol stationnaire:

• Obtenir les positions de la carte flottante
• Prenez tous les contenus de la carte «petit» et remplissez une carte plus grande
• Ajoutez l'intention de planter pour attendre ~ 180ms avant de montrer le
• Placez la GRANDE carte sur la petite et utilisez .show(600) pour l'afficher.
• Si la souris sort de la carte GRANDE utilisez .hide()

JQuery:

 $('body').append('<div id="userCard"><div id="userCardContent"></div>'); var $hoveredImg; $('.userCardMini').on('mouseenter','img',function(e){ $hoveredImg = $(this); var thisSrc = $hoveredImg.attr('src').split('s=')[0]; var posX = $hoveredImg.offset().left-10; var posY = $hoveredImg.offset().top-10; $('#userCardContent').html( $hoveredImg.parent().html() ); $('#userCardContent').find('img').attr('src', thisSrc+'s=64&d=identicon&r=PG'); var t = setTimeout(function() { $('#userCard').css({left:posX, top:posY}).show(600); }, 200); $hoveredImg.data('timeout', t); }).on('mouseleave',function(){ clearTimeout($hoveredImg.data('timeout')); }); $('#userCard').mouseleave(function(){ $(this).stop(1,1).hide(); }); 

HTML:

 <div class="userCardMini" data-user="383904"></div> <div class="userCardMini" data-user="1063093"></div> 

CSS:

  .badge{ width:6px; height:6px; border-radius:10px; font-size:11px; display:inline-block; margin:2px; } .gold{background:gold;} .silver{background:silver;} .bronze{background:#cc9966;} .userCardMini{ width:200px; height:32px; /*background:#eee;*/ margin:4px; clear:both; } a{color:#27f;} img.userImg{ cursor:pointer; float:left; margin-right:10px; box-shadow:1px 1px 3px -1px #999; } .userDetails, .userLocation{display:none;} /* user card - BIG ONE */ #userCard{ position:absolute; top:0; left:0; width:280px; box-shadow:1px 1px 3px -1px #999; border-radius:3px; background:#666; color:#eee; display:none; } #userCardContent{ width:260px; margin:10px; } #userCardContent a{color:#fff;} #userCard .userDetails, #userCard .userLocation{ display:block; margin-bottom:4px; } 

L'autre solution (j'aime le plus)
Serait de jouer avec CSS et z-index des éléments de DIV, de la manière qui – en planant le parent, nous animons l'élément contenu (enfants) de dessous

JsBin demo 2 – solution simple

Ce jord de jQuery:

 var $desc; $('.userCard').hover(function(){ $desc = $(this).find('.description'); $(this).css({zIndex:'3'}); var t = setTimeout(function() { $desc.show('slow'); }, 150); $(this).data('timeout', t); },function(){ $(this).css({zIndex:0}); clearTimeout($(this).data('timeout')); $desc.hide(); }); 

HTML:

  <div class="userCard"> <div class="initial"> <img src="http://placehold.it/26x26/f7b" /><h2>User name 1</h2> </div> <div class="description"> <div class="description_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et neque quam, vel dapibus neque. Praesent rutrum ultricies sodales. </div> </div> </div> 

CSS:

  .userCard{ position:relative; padding:10px; width:200px; margin:10px; } .initial{ position:relative; cursor:pointer; z-index:2; } .userCard img{ float:left; margin-right:10px; box-shadow: 1px 1px 3px -1px #999; } .description{ background:#eee; position:absolute; top:0px; left:0px; padding:10px; clear:both; display:none; } .description_content{ padding-top:37px; position:relative; width:200px; }