Question

我有这个信息框会滑动显示悬停在连接到该信息框的箭头上。请参阅我进一步关联的jsfiddle，以获得更多见解。

我挣扎的是它有点迟钝。它随心所欲地快速跳来跳去，让我烦恼不已。我做了一些研究，发现.stop(true, false)是弄乱它的东西，但你也不能没有它。尽管如此，Haven还没有找到任何平稳的解决方案......

如果可能，我希望......

...悬停时，即使鼠标离开，动画也会完全动画。
... #infoboxArrow悬停时的动画效果，然后当鼠标离开其父#infocontainer时动画回来。

＆＃13;

$('#infoboxArrow').hover(function() {
  $('#infocontainer')
  .stop(true, false)
  .animate({
    right: 250
  }, 600);
}, function() {
  $('#infocontainer')
  .stop(true, false)
  .animate({
    right: 0
  }, 600);
});

＆＃13;

#infocontainer{
  position:fixed;
  background-color: blue;
  top: 0em;
  right: 0em;
}

#infoboxArrow {
  display: inline-block;
  background-color: pink;
  margin-bottom: 10.1325em;
  margin-top: 10.1325em;
  height: 7.735em;
}

#infoboxDiv{
  display: inline-block;
  background-color: yellow;
  width: 400px;
  height: 28em;
  position: absolute;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer"  class="slideOutTab">
  <div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
  <div id="infoboxDiv" class="slideOutTab"></div>
</div>

＆＃13;

Answer 1

尝试收听mouseenter和mouseleave个事件，而不是hover：

var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 250
  }, 600);
});
$infocontainer.on('mouseleave', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 0
  }, 600);
});

＆＃13;

var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 250
  }, 600);
});
$infocontainer.on('mouseleave', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 0
  }, 600);
});

＆＃13;

#infocontainer{
  position:fixed;
  background-color: blue;
  top: 0em;
  right: 0em;
}
#infoboxArrow {
  display: inline-block;
  background-color: pink;
  margin-bottom: 10.1325em;
  margin-top: 10.1325em;
  height: 7.735em;
}
#infoboxDiv{
  display: inline-block;
  background-color: yellow;
  width: 400px;
  height: 28em;
  position: absolute;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer"  class="slideOutTab">
  <div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
  <div id="infoboxDiv" class="slideOutTab"></div>
</div>

＆＃13;

另请注意，您不需要图像。而且您将em个单元与px混合在一起，因此如果字体大小发生变化，您的布局可能会中断。请考虑以下代码：

＆＃13;

var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 250
  }, 600);
});
$infocontainer.on('mouseleave', function() {
  $infocontainer
  .stop(true, false)
  .animate({
    right: 0
  }, 600);
});

＆＃13;

#infocontainer{
  position: fixed;
  height: 28em;
  background-color: blue;
  top: 0em;
  right: 0em;
}
#infoboxArrow {
  display: inline-block;
  background-color: pink;
  position: relative;
  top: 50%;
  margin-top: -59px;
  border: 59px solid #FFC0CB;
  border-right: 100px solid #000000;
  border-left: none;
}
#infoboxDiv{
  display: inline-block;
  background-color: yellow;
  width: 400px;
  height: 100%;
  position: absolute;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer"  class="slideOutTab">
  <div id="infoboxArrow" class="slideOutTab"></div>
  <div id="infoboxDiv" class="slideOutTab"></div>
</div>

＆＃13;

Javascript：悬停时滞后;动画幻灯片

1 个答案: