0

このインフォボックスは、そのインフォボックスに接続された矢印にカーソルを合わせるとスライドして表示されます。詳細については、さらに下にリンクした jsfiddle を参照してください。

私が苦労しているのは、それがちょっと遅いということです。それは好きなように非常に速く前後にジャンプし、私をとても悩ませます. 私はいくつかの調査を行い.stop(true, false)、それがそれを台無しにするものであることがわかりましたが、それなしでは本当に行くことはできません. しかし、まだスムーズな解決策は見つかりませんでした...

できればお願いしたいのですが...

  1. ...ホバーすると、マウスが離れてもアニメーションを完全にアニメーション化します。

  2. ...#infoboxArrowマウスがホバーされたときにアニメーション化し、マウスがその親を離れたときにアニメーション化します#infocontainer。

$('#infoboxArrow').hover(function() {
  $('#infocontainer')
  .stop(true, false)
  .animate({
    right: 250
  }, 600);
}, function() {
  $('#infocontainer')
  .stop(true, false)
  .animate({
    right: 0
  }, 600);
});   
#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;
}
<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>

4

1 に答える 1

1

の代わりにmouseenterとイベントをリッスンしてみてください:mouseleavehover

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);
});


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

また、画像は必要ありません。emまた、ユニットとを混在させているpxため、フォント サイズが変わるとレイアウトが崩れる可能性があります。次のコードを検討してください。

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

于 2014-11-08T23:55:48.813 に答える