Jqueryマウスオーバー時に左にdivを、マウスオーバーでcollaspeを動かす必要はありませんか？

Question

こんにちは、私は、コードのこの作品を仕上げて助けを得ることができれば、私は、

を思っていた私は、オーバーフローとdiv要素があります。それは1株リンクし、その後で、ULリストで内側に、隠されたと82pxのマージン左を3つの外部リンク、

私は共有リンク上にカーソルを移動すると、それがバックマージン左へ左へのdivのスライドのように、正常に動作します：0

私はマウスアウトとき、私はこれが再び崩壊したいが親リンク先だけでなく、共有リンクでも、これは問題を引き起こしています。これは、mouseout機能を置くと、リンクのulリストを移動すると、全体がすべてスライドし、非常にusablですe。

私が基本的に必要とするのは、リンクが上に乗ったとき、divが左にスライドして3つのリンクが表示され、ユーザーがこれらをクリックすると、ユーザーがdivから離れて移動すると再び折りたたまれます。

$("#shareBtn").mouseover(function(){ 
     var $marginLefty = $(this).parent(); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0 
    }); 
}).mouseout(function(){ 
     var $marginLefty = $(this).parent(); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 82 ? $marginLefty.outerWidth() : 82 
    }); 
}); 

とそれに行くために、HTML：：ここで

は私のjqueryのこれまでのコードである

<div id="player"> 


    <div id="share_feature"> 
     <div> 
     <a id="shareBtn" href="#">share</a> 
     <ul id="player_social"> 
      <li><a href="#">google</a></li> 
      <li><a href="#" >facebook</a></li> 
      <li><a href="#" >twitter</a></li> 
     </ul> 
    </div> 
    </div> 

これで任意の助けをいただければ幸い、 おかげ

Answer 1

このトピックについては、多くの例があります。

使用このような何か：私はそれをテストしていませんが、このいずれかで、あなたが$(this).parent()を探して余分保存していると、それはあなたが

必要何をすべき

$("#shareBtn").bind('mouseenter mouseleave',function(event){ 
    var $marginLefty = $(this).parent(); 
    if(event.type == 'mouseenter') { 
     $marginLefty.animate({ 
      marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0 
     });  
    } else if(event.type == 'mouseleave') { 
     $marginLefty.animate({ 
      marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 82 ? $marginLefty.outerWidth() : 82 
     });  
    } 
}); 

Answer 2

divを元に戻すコードと一緒に試してみてください一度あなたはそれから移動します。

$("#share_feature").mouseleave(function(){ 
    $(this).animate({ 
     marginLeft: parseInt($(this).css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0 
    }); 
})