Jquery 在悬停时向左滑动 div 并在鼠标悬停时折叠不能正常工作？答案

【问题标题】：Jquery Slide a div to the left on hover and collaspe on mouseout not working as it should?Jquery 在悬停时向左滑动 div 并在鼠标悬停时折叠不能正常工作？
【发布时间】：2012-03-09 04:23:56
【问题描述】：

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

我有一个带有overflow:hidden的div和一个82px的margin-left，里面是一个分享链接，然后是一个带有三个外部链接的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>

对此的任何帮助将不胜感激，谢谢

【问题讨论】：

标签： javascript jquery css hover onmouseover

【解决方案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() 并且它应该可以满足你的需要

【讨论】：

【解决方案2】：

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

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

【讨论】：