테스트 사이트 - 개발 중인 베타 버전입니다

j쿼리 공부중에 혹시 이건 고수님들에게 쉬울거 같은데요.. 채택완료

와이쿠 5년 전 조회 1,985

</p>

<p><script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></a>  

<script>

$(document).ready(function(){

    $("#div_m").hover(function(){

        $("#div1").fadeToggle();

        $("#div2").fadeToggle("slow");

        $("#div3").fadeToggle(1000);

    });

});

</script>

<div id="div_m" style="width:180px;height:80px;background-color:red;"></div>

<div id="div1" style="width:180px;height:80px;background-color:red;display:none"></div>

<div id="div2" style="width:180px;height:80px;background-color:green;display:none"></div>

<div id="div3" style="width:180px;height:80px;background-color:blue;display:none"></div</p>

<p>

 

위와 같은 기초적인 코드를 실행하면...네모 박스 div_m 박스에 있을때는 모두 3개가 노출이 되는데..

아래로 내려가서 div1 박스를 마우스를 가져가면 모두 사라져 버립니다.

hover 로 하면 될거 같은데..

어렵네요....

고수님들 도와주세용..

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
5년 전

그렇게 되는 것이 당연합니다.

fadeToggle함수는 이 경우 마우스를 m에 오버 했을 때 보이는 것은 보이지 않게

보이지 않는 것은 보이게 하는 함수입니다.

 

사라지지 않고 계속 보이게 할려면

fadeIn 함수를 사용해 보시죠.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

와이쿠
5년 전
네 fadein 함수 사용해 보겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인