nav 슬라이드 실행 시 발생하는 문제 질문입니다.

초보자아 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.03.03 09:25:27 조회 1224 (116.♡.♡.171)

본문

mouseover일 때 애니메이션이 실행되도록 했는데 배경에 마우스를 오버하면 막힘없이 스르륵 내려가지만

이미지나 글자에 오버를 하면 중간에 한번 끊기다가 내려갑니다..

글자를 두번 오버하면 두번 끊기고 오버할 떄마다 끊기네요..

왜 이런 현상이 일어나는지 아시나요?

아래는 css코드와 제이쿼리 코드와 사이트입니다..

처음엔 css 애니메이션으로 내려가도록 하고 그 이후엔 제이쿼리 애니메이션으로 내려가도록 하였습니다.

http://test11.dothome.co.kr/g5/


@keyframes hover {
    0% {
        height: 100px;
    }
    100% {
        height: 500px;
    }
}
 
.h_box_hover {
    width: 100%;
    border: none;
    background-color: rgba(255, 255, 255);
    box-shadow: 0 3px 18px rgb(0 0 0 / 6%);
    position: fixed;
    overflow: hidden;
    animation: hover 0.3s forwards;
    height: 500px;
    z-index: 4;
    top: 0;
    left: 0;
}


$("#hbox").mouseover(function() {
    let width = $(window).width();
    let windowtop = $(window).scrollTop();
 
    if (width > 1024) {
        $(".h_box").attr("class", "h_box_hover");
        $(".h_box_hover").stop().animate({
            height: "500px"
        }, 300)
        $(".mbox").show();
        $("header a").attr("style", "color: #333333")
        $(".m_logo .logo_img").attr("src", "/img/logo_b.png");
        $(".m_bar img").addClass("bar_b");
    }
});