Jquery在悬停时向左滑动一个div，在mouseout时进行collapse，但没有正常工作

Question

嗨，我想知道是否可以帮助我完成这段代码，

我有一个带溢出的div：隐藏，空白处为82px，里面是一个共享链接，然后是一个带有三个外部链接的ul列表，

当我把鼠标悬停在共享链接上时，它工作得很好，就像在div中向左滑动一样。

然而，当我将鼠标移出父div而不仅仅是共享链接时，我希望它再次崩溃，这会造成问题，因为当我将mouseout功能放入其中时，意味着当你在链接的ul列表上移动时，整个东西会到处滑动，非常可用。

我基本上需要的是，当一个链接悬停在上面时，div会向左滑动，出现三个链接，用户可以点击这些链接，然后当用户离开div时，它会再次折叠。

到目前为止，这是我的jquery代码：

$("#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：

 <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

关于这个主题有很多例子。

使用这样的东西：

$("#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
        });    
    } 
});

我还没有测试过它，但有了这个，你就可以省去额外的$(this).parent()搜索，它应该可以满足你的

Answer 2

将此与您的代码一起尝试，一旦您移出div，就会将其折叠回来。

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