javascript - 这是什么网络效果

Question

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

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

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

Answer 1

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

Answer 2

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

这足以让你开始。

更新

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

Answer 3

简而言之：

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

它使用 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/

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 卡。
  
• display:none消除CSS 中不需要的内容、段落或元素
• 只有一张“大”卡片会改变它在页面上的位置，克隆并在悬停时显示完整内容 - 为该元素准备display:block;所有内容的 CSS。

悬停时：

• 获取悬停卡片的位置
• 抓取所有“小”卡片内容并填充一张更大的卡片
• 添加悬停意图以等待约 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 - 简单的解决方案

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