자바 스크립트 : 마우스 오버시 지연; 슬라이드 애니메이션

debugcn 에 게시 Dev

HyperCharles

해당 정보 상자에 연결된 화살표를 가리키면 슬라이드 표시되는이 정보 상자가 있습니다. 더 많은 통찰력을 얻으려면 더 아래로 연결 한 jsfiddle을 참조하십시오.

내가 고심하고있는 것은 그것이 다소 느리다는 것입니다. 좋아하는대로 정말 빠르게 앞뒤로 뛰고 많이 괴롭 힙니다. 나는 약간의 조사를했고 .stop(true, false)그것이 그것을 엉망으로 만드는 것이라는 것을 알아 냈지만, 당신도 그것 없이는 정말로 갈 수 없다는 것을 알았 습니다. 그래도 아직 부드러운 해결책을 찾지 못했습니다 ...

가능하다면 ...

... 마우스를 가리키면 마우스가 나가더라도 애니메이션을 완전히 애니메이션합니다.
... #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>

오리올

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

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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사