jquery animate 실행 관련 질문입니다.

지운아빠

2014-01-14 (화) 10:33:12 7,695

Copy

<script>
$(function() {
    $(".ft-btn").hover(function(){ // 버튼에 마우스가 올라오면
        $(this).find(".ft-desc").addClass("ft-desc-on"); // ft-desc 에 ft-desc-on 클래스를 추가
        roll_up("ft-desc-on"); // roll_up 실행
    }, function(){ // 버튼에서 마우스가 벗어나면
        roll_down("ft-desc-on"); // roll_down 실행
        $(".ft-desc-on").removeClass("ft-desc-on"); // ft-desc-on 클래스 제거
    });
});

function roll_up(el) {
    $("."+el).stop(true, true).animate({bottom: "+=10", opacity: 1}).fadeIn("slow");
    // 부모 element 하단 기준 10px 위로 이동하며 fadein
}

function roll_down(el) {
    $("."+el).stop(true, true).animate({bottom: "-=10", opacity: 0}).fadeOut("fast");
    // 부모 element 하단 기준 10px 아래로 이동하며 fadeout
}
</script>

이 소스에서 roll_up 의 animate 는 실행이 안 되고, fadeIn 만 실행이 됩니다.

roll_down 에서는 둘다 실행이 되구요.

무엇이 문제일까요?

jquery

답변 4개 / 댓글 3개

채택된 답변

+20 포인트

smileesh

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2014-01-14 (화) 10:55:26

fadeOut은 정상적으로 작동한다면..

소스를 안보고 추측을 하려니깐 잘 모르겟지만.

해당 selector에서 display:none 속성이 없기때문에 아마도 fadeIn이 작동안하는 원인이 잇을 수 있습니다.

즉 이말은 부모한테 display:none속성이 처음에 먹혀서 그러지 않을까 싶습니다.

해당 html도 같이 올려주시면 더욱 더 도움이 될듯합니다.

답변에 대한 댓글 1개

지운아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2014-01-14 (화) 11:12:00

우선 이 문제는 편리님 도움으로 해결했습니다.
selector 에는 display:none 값이 있었습니다. loading 시 display block 시키고 opacity 도 0 으로 만든 다음, fadeIn fadeOut 은 제거하는 것으로 해결했습니다.
다음부턴 이런 유형은 html 도 함께 올려야겠네요. 답변 감사합니다. ^^