3

スタックオーバーフローで1000レピュテーションに達すると、消耗品のユーザーカードを取得します

ここに画像の説明を入力してください

カードにマウスを合わせると。

この効果を再現するにはどうすればよいですか？それはどのように呼ばれますか？私の推測では、それはJqueryメソッドですが、それが可能であれば、私がそれを探したので誰かが私を正しい方向に向けることができますが、私が必要とするものを正確に得ることができません。

4

8 に答える 8

3

あなたが求めているものの本当に簡単な例はここにありますhttp://jsfiddle.net/RjpLt/

始めるには十分です。

アップデート

今ccsアニメーションで：http：//jsfiddle.net/RjpLt/1/

于 2012-06-29T19:42:18.487 に答える
3

これが彼らが使用しているものかどうかはわかりませんが、CSS3トランジションアニメーションは単純で、プログラミングの方法はありません。

于 2012-06-29T19:27:06.913 に答える
2

一言で言えば：

ポップアップがトリガーされる<div>と、適切なコンテンツを含むaがDOM内のどこかに動的に追加されます（ほとんどの場合、Javascriptはポップアップを配置し、作成します）。この要素は最初は小さく、次に最終的な寸法にアニメーション化されます。一方、CSSルールはポップアップの外観を指定します。マウスがポップアップ領域を離れると、<div>がDOMから削除され、ポップアップが消えます。

于 2012-06-29T19:30:50.683 に答える
1

静止画をポーズしたので、何が起こっているのか正確にわかりません。これが私の推測です：

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/

于 2012-06-29T19:33:33.620 に答える
1

私はそれがjQueryを使用していると確信しています、そして私はそれが「アニメート」であると確信しています：

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

アニメーション化されたスタイリングは、おそらくサイズと背景色、およびその領域で発生している他のことです。

于 2012-06-29T19:24:28.873 に答える
1

簡単だと思います$('#container).show('slow');

于 2012-06-29T19:25:46.280 に答える
0

私の推測は（ソースから）：

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です。

于 2012-06-29T19:45:31.400 に答える
0

私は2つのソリューションを作成しました：

jsBinデモ

  • 関連するすべてのコンテンツをDIVカードに動的に入力します。
  • display:noneCSSで使用している不要なコンテンツ、段落、または要素を削除します
  • 1枚の「BIG」カードのみがページ上の位置を変更し、ホバー時に完全なコンテンツのクローンを作成して表示します-その要素のCSSをdisplay:block;すべてのコンテンツに準備します。

ホバー時：

  • ホバーしたカードの位置を取得します
  • すべての「小さな」カードの内容を取得し、大きなカードにデータを入力します
  • ホバーインテントを追加して、表示する前に約180ミリ秒待機します
  • 小さいカードの上に大きいカードを置き、.show(600)それを表示するために使用します。
  • マウスがBIGカードを離れる場合は、.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;
  }

もう1つの解決策（私が最も気に入っている）
は、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：

  <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;
  }
于 2012-06-30T00:04:55.110 に答える