javascript - Jquery 在悬停时向左滑动一个 div 并在鼠标移出时折叠不正常工作？

Question

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

我有一个带有 overflow:hidden 和 82px 的 margin-left 的 div，里面是一个共享链接，然后是一个带有三个外部链接的 ul 列表，

当我将鼠标悬停在共享链接上时，它工作正常，因为在 div 中向左滑动回到 margin-left: 0。

但是，当我鼠标移出父 div 而不仅仅是共享链接时，我希望它再次崩溃，这会导致问题，因为当我将鼠标移出功能放入其中时，这意味着当您移动整个链接的 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() 的时间，它应该可以满足你的需要