Jquery：悬停滑动选项卡机制答案

【问题标题】：Jquery: Hover slide tab mechanismJquery：悬停滑动选项卡机制
【发布时间】：2012-03-24 23:55:24
【问题描述】：

我目前正在使用滑动标签。我正在实现悬停功能以触发选项卡向左滑动。唯一的问题是，当鼠标悬停时选项卡确实会滑动，但它会立即关闭。我希望标签在鼠标悬停后保持打开状态，关闭标签的唯一方法是单击初始的“箭头”div。这是我的工作演示：http://jsfiddle.net/eMsQr/6/

<script language="javascript">
    $(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    }
  );
});
</script>

<html>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
</html>

【问题讨论】：

jsfiddle.net/eMsQr/13 有帮助吗

标签： javascript jquery html javascript-events

【解决方案1】：

你是说这个吗？使用mouseenter- 和click-event：

$(document).ready(function() {
  $("#arrow")
    .mouseenter(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    })
    .click(function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    });
});

另见this example。

【讨论】：

谢谢，.mouseenter 是解决问题的关键。

【解决方案2】：

$(document).ready(function() {
  $("#arrow").hover(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){});
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

小提琴是here。

【讨论】：