这是什么网络效果答案

【问题标题】：What is this web effect这是什么网络效果
【发布时间】：2012-07-01 08:06:19
【问题描述】：

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

当您将鼠标悬停在卡片上时。

如何重现这种效果？怎么称呼？我的猜测是它是一种 Jquery 方法，但如果有人可以指出我正确的方向，因为我正在寻找它，但无法得到我需要的东西。

【问题讨论】：

你为什么不看一下代码并找出答案？
@OliCharlesworth 我刚开始接触网络。即使我查看源代码我也不知道在哪里查看。
@OliCharlesworth 很高兴找到类似的东西......
世界上有多少网页设计师，就有多少种方法可以实现这种效果。好吧，这可能有点夸大其词，但是有很多方法可以做到这一点。通常，您将hover 事件处理程序附加到要展开的元素。在处理程序中，您可以更改元素的尺寸（可能使用动画），并修改其中的内容）
@ianpgall：我自己没有看过代码，但我想通过简单地删除看起来不相关的所有内容，可以很快隔离相关位。

标签： javascript jquery web

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我觉得很简单$('#container).show('slow');

【讨论】：

【解决方案3】：

我不知道这是否是他们使用的，但CSS3 transition animations 将是一种简单的、无需编程的方式。

【讨论】：

Niiice 这可以完成这项工作！
绝对是一个很好的可能性。但如果它使用 jQuery，我不会感到惊讶，以确保不支持 CSS3 的旧浏览器可以做同样的事情。
@ianpgall，是的，我还没有完全了解 SO 的用途，但尽管存在兼容性问题，但 CSS 通常是我的首选。如果我们不推动网络向前发展，它就不会，对吧？
@AbhranilDas 非常真实！我也更喜欢 CSS，但是一旦你想做一件 CSS 不能做的小事（可能是操作 DOM 或从服务器检索数据），那么你就在 CSS 和 javascript 之间混合事件，而且更难处理

【解决方案4】：

简而言之：

当弹出窗口被触发时，带有适当内容的<div> 会被动态添加到 DOM 内的某处（很可能是 Javascript 定位弹出窗口并创建它）。这个元素一开始很小，然后动画到它的最终尺寸。同时，CSS 规则指定弹出窗口的视觉外观。当鼠标离开弹窗区域时，<div> 从 DOM 中移除，使弹窗消失。

【讨论】：

要么那个，要么
总是在那里，悬停只是显示/动画它，然后隐藏/动画它稍后
只需将div 和position:absolute 放置在图像的同一offset().top 和.left 处，以display:none 开头div 然后调用.show() 并带有持续时间(.show(500)) 将负责在 mouseover 和 hide() 上将 div 从左上角扩展到右下角 mouseleave （我会将这两个函数都放在 .hover() 中）。它会达到几乎相同的效果，不是吗？
@ianpgall：我完美的科学调试程序（在 Chrome 的开发工具中查看动态 DOM 树几次时显示/隐藏弹出窗口）的结论很明确：删除了 div。反正也没什么太大区别。 :)
@ianpgall 不，这是来自http://cdn.sstatic.net/js/full.js 的StackExchange.helpers.MagicPopup 函数。检查，每次悬停都会创建div。
干得好。是否添加绝对无关紧要，只是在添加时发生的额外处理。对我来说，我宁愿保留它并根据是否悬停来操纵它。但这不是我的网站:)

【解决方案5】：

由于您使用的是静态图片，因此很难判断到底发生了什么。这是我的猜测：

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

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

类似：

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

#profile 需要通过 css "display: none" 或 $('#profile').hide(); 提前隐藏。 http://api.jquery.com/hide/

【讨论】：

只要将鼠标悬停在拥有超过 1000 名声望的任何人的图片上，您就会看到效果。

【解决方案6】：

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

足以让您入门。

更新

现在有 ccs 动画：http://jsfiddle.net/RjpLt/1/

【讨论】：

这是一个不错的纯 CSS 技巧，但没有 OP 似乎在寻找的缓动过渡。
已将-moz 和-o 添加到您的JSFiddle，+1

【解决方案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。

【讨论】：

【解决方案8】：

我创建了 2 个解决方案：

jsBin demo

用所有相关内容动态填充 DIV 卡。
在 CSS 中使用 display:none 消除不需要的内容、段落或元素
只有一张“大”卡片会改变它在页面上的位置，克隆并在悬停时显示完整内容 - 为该元素准备 CSS 以 display:block; 所有内容。

悬停时：

获取悬停卡片的位置
获取所有“小”卡片内容并填充更大的卡片
添加悬停意图以在显示之前等待约 180 毫秒
将大卡放在小卡上，并使用.show(600) 显示。
如果鼠标离开大卡使用.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;
  }

另一种解决方案（我最喜欢）
是使用 DIV 元素的 CSS 和 z-index，其方式是 - 将父级悬停在我们从下方为内容（子级）元素设置动画

jsBin demo 2 - simple solution

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

【讨论】：