nav 슬라이드 실행 시 발생하는 문제 질문입니다. 채택완료
mouseover일 때 애니메이션이 실행되도록 했는데 배경에 마우스를 오버하면 막힘없이 스르륵 내려가지만
이미지나 글자에 오버를 하면 중간에 한번 끊기다가 내려갑니다..
글자를 두번 오버하면 두번 끊기고 오버할 떄마다 끊기네요..
왜 이런 현상이 일어나는지 아시나요?
아래는 css코드와 제이쿼리 코드와 사이트입니다..
처음엔 css 애니메이션으로 내려가도록 하고 그 이후엔 제이쿼리 애니메이션으로 내려가도록 하였습니다.
http://test11.dothome.co.kr/g5/
</strong></p>
<p>@keyframes hover {</p>
<p> 0% {</p>
<p> height: 100px;</p>
<p> }</p>
<p> 100% {</p>
<p> height: 500px;</p>
<p> }</p>
<p>}</p>
<p> </p>
<p>.h_box_hover {</p>
<p> width: 100%;</p>
<p> border: none;</p>
<p> background-color: rgba(255, 255, 255);</p>
<p> box-shadow: 0 3px 18px rgb(0 0 0 / 6%);</p>
<p> position: fixed;</p>
<p> overflow: hidden;</p>
<p> animation: hover 0.3s forwards;</p>
<p> height: 500px;</p>
<p> z-index: 4;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p>}</p>
<p><strong>
</strong></p>
<p>$("#hbox").mouseover(function() {</p>
<p> let width = $(window).width();</p>
<p> let windowtop = $(window).scrollTop();</p>
<p> </p>
<p> if (width > 1024) {</p>
<p> $(".h_box").attr("class", "h_box_hover");</p>
<p> $(".h_box_hover").stop().animate({</p>
<p> height: "500px"</p>
<p> }, 300)</p>
<p> $(".mbox").show();</p>
<p> $("header a").attr("style", "color: #333333")</p>
<p> $(".m_logo .logo_img").attr("src", "/img/logo_b.png");</p>
<p> $(".m_bar img").addClass("bar_b");</p>
<p> }</p>
<p>});</p>
<p><strong>
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
mouseover과 mouseenter 차이를 잘 몰랐는데 공부하게 되네요. 감사합니다!