什么是网络效果

当您在堆栈溢出时达到1000声誉时，您将获得一个可消耗的用户卡

当你将鼠标hover在卡片上时。

如何重新创建此效果？ 怎么称呼？ 我的猜测是它是一个Jquery方法，但是如果它可以有人指出我正确的方向，因为我寻找它但不能得到我需要的东西。

Answer 1

我不知道这是否是他们使用的，但CSS3过渡动画将是一个简单的，没有编程方式来做到这一点。

Answer 2

你所追求的一个非常简单的例子是http://jsfiddle.net/RjpLt/

这足以让你入门。

UPDATE

现在使用ccs动画： http ： //jsfiddle.net/RjpLt/1/

Answer 3

简而言之：

触发弹出窗口时，会在DOM内部的某处动态添加具有适当内容的

（很可能是Javascript定位弹出窗口以及创建它）。 此元素从小开始，然后动画到其最终尺寸。 同时，CSS规则指定弹出窗口的视觉外观。 当鼠标离开弹出区域时，

将从DOM中删除，使弹出窗口消失。

Answer 4

我确定它确实使用了jQuery，我认为它是“动画”：

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

动画样式可能是大小和背景颜色，以及该区域发生的其他事情。

Answer 5

我认为这很简单$('#container).show('slow');

Answer 6

由于您提出了静态图像，因此很难确定究竟发生了什么。 这是我的猜测：

它使用Hover来触发事件： http ： //api.jquery.com/hover/

然后显示隐藏的div： http ： //api.jquery.com/show/

就像是：

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

#profile需要事先通过css“display：none”或$（’＃profile’）隐藏.hide（）; http://api.jquery.com/hide/

Answer 7

我的猜测是（来自消息来源）：

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);

但正如我所说，我是新手，所以它可能甚至没有关联，但它是一个Animated onmouseover on the gravatar 。

Answer 8

我创建了2个解决方案

jsBin演示

• 动态填充包含所有相关内容的DIV卡。
• 使用CSS中的display:none消除不需要的内容，段落或元素
• 只有一张’BIG’卡会改变它在页面上的位置，克隆并显示hover时的FULL内容 – 准备要display:block;元素的CSS display:block; 所有内容。

hover时：

• 获取hover卡的位置
• 抓住所有’小’卡内容并填充更大的卡片
• 添加hover意图等待〜180ms然后再显示
• 将BIG卡放在小卡上，然后使用.show(600)显示它。
• 如果鼠标离开BIG卡，请使用.hide()

jQuery的：

 $('body').append('
'); 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：

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; } 

---

另一个解决方案（我最喜欢）
将使用DIV元素的CSS和z-index，就像 – 在父母盘旋我们动画内容（儿童）元素从下面

jsBin演示2 – 简单的解决方案

这一点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：

  
 
 
User name 1
 
 
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et neque quam, vel dapibus neque. Praesent rutrum ultricies sodales. 
 
  

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; }