클릭하면 jQuery fadeIn fadeOut

다른 div를 클릭 할 때 div가 fadeIn을 만들려고하는데 다른 div가 클릭되면 (닫기 버튼이 될 것이지만) 코드가 작동하지 않습니다. 뭔가 잊었습니까? ?클릭하면 jQuery fadeIn fadeOut

body{ 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color:#f0f2df; 
} 

#container{ 
    border: solid 1px #f0f2df; 
    background-color:#f0f2df; 
    text-align: left; 
    margin: auto; 
    width: 939px; 
    height: 570px; 
    top:41px; 
    position:relative; 
} 
#contact_form{ 
    display: none; 
    background-image:url(../images/bg.png); 
    width: 703px; 
    height: 379px; 
    position:absolute; 
    left:236px; 
    bottom:34px; 

} 
.contact_close{ 
    display:none; 
    background-image:url(../images/close.png); 
    width:17px; 
    height:17px; 
    position:absolute; 
    right:5px; 
    top:135px; 
}

html로 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="css/main.css" /> 
<title>test</title> 
<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/click.js'></script> 
</head> 

<body> 
    <div id="container"> 
     <div class="button_contact"></div> 
     <div id="contact_form"> 
     <div class="button_close"></div></div> 
</div> 
</body> 
</html>

그리고 당신은 잊었 자바 스크립트

$(document).ready(function(){ 

$("button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
}); 

$(".contact_close").click(function() { 
     $("#contact_form").fadeOut("slow"); 
    }); 
});

출처

2009-12-18 Bruno

그리고 fadeToggle – AminM

작동합니다 당신이 필요합니다 "." before button_contact

$(document).ready(function(){ 
    $(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
    }); 

    $(".contact_close").click(function() { 
    $("#contact_form").fadeOut("slow"); 
    }); 
});

출처

2009-12-18 20:31:50 scunliffe

aw 남자를 사용할 수 있습니다. 나는 두 배로 확인했습니다. 오, 친절하게 감사합니다. – Bruno

다음은 CSS입니다. 버튼 닫기 전에 ...

$(".button_contact")....

이

출처

2009-12-18 20:31:42 akearney

fadeIn 버튼의 선택기가 약간 벗어났습니다. 원래 코드가 노드 이름이 button_contact이 아닌 button_contact이 아닌 요소와 일치합니다.

보십시오.

$(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
});

출처

2009-12-18 20:32:24

$ ("button_contact")을 클릭 (함수() {

$(".button_contact").click(function() {

출처

2009-12-18 20:32:37 rosscj2533

이 시도해야합니다 :

$(document).ready(function(){ 

$(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
}); 

$(".button_close").click(function() { 
    $("#contact_form").fadeOut("slow"); 
    }); 
});

출처

2009-12-18 20:32:41

JQuery와도있다. 요소를 클릭 할 때 "토글 (toggled)"되는 다중 기능을 전달할 수있는 toggle() 함수

http://api.jquery.com/toggle/ 원하는만큼 많은 기능을 추가 할 수 있기 때문에 멋진 기능입니다.

출처

2010-01-23 22:26:01 Mike

죄송합니다. 클릭하는 링크가 다른 DIV에 해당하는 아약스 링크 인 경우이 구문이 작동합니까? 나는 그것이 작동하도록 할 수 없습니다!

<script type="text/javascript" src="js/jquery-ajaxLink.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $(".ajaxLink").ajaxLink(); 
     $(".ajaxlink").click(function() { 
    $("#content").fadeIn("slow"); 
    }); 
}); 
    </script> 


      <ul id="mainNav"> 
    <li> <a class="ajaxLink" href="test1.htm">Who We Are </a></li> 
    <li> <a class="ajaxLink" href="test2.htm">Benefits</a></li> 
    <li> <a class="ajaxLink" href="test2.htm">Commercial Terms</a></li> 
    <li> <a class="ajaxLink" href="test3.htm">Property Types</a></li> 
    <li> <a class="ajaxLink" href="test3.htm">Commercial Info</a></li> 
      </ul> 

<div id="content"></div>

출처

2010-12-10 10:40:03 iamwhitebox

답변

관련 문제