jquery animate 실행 관련 질문입니다.
본문
<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 에서는 둘다 실행이 되구요.
무엇이 문제일까요?
답변 4
fadeOut은 정상적으로 작동한다면..
소스를 안보고 추측을 하려니깐 잘 모르겟지만.
해당 selector에서 display:none 속성이 없기때문에 아마도 fadeIn이 작동안하는 원인이 잇을 수 있습니다.
즉 이말은 부모한테 display:none속성이 처음에 먹혀서 그러지 않을까 싶습니다.
해당 html도 같이 올려주시면 더욱 더 도움이 될듯합니다.
우선 이 문제는 편리님 도움으로 해결했습니다.
selector 에는 display:none 값이 있었습니다. loading 시 display block 시키고 opacity 도 0 으로 만든 다음, fadeIn fadeOut 은 제거하는 것으로 해결했습니다.
다음부턴 이런 유형은 html 도 함께 올려야겠네요. 답변 감사합니다. ^^
$("."+el).stop(true, true).animate({bottom: "+=10", opacity: 1}, function () { jQuery(this).fadeIn("slow"); });
이렇게하시는게..------------------
그러고보니..opacity와 fadein이랑 같이 사용하셨네요..같은기능인데..
답변 감사합니다만 알려주신 방법도 animate 부분이 실행되지 않네요.
opacity 가 빠지면 animate 효과와 fade 효과가 동시에 실행이 안 되네요. 다른 방법이 있을까요?
내용추가.
roll_down 실행 도중 다시 roll_up 을 실행하면 animate 와 fadeIn 이 모두 작동합니다.
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.