jQuery fadein fadeout과 함께
-
20-09-2019 - |
문제
다른 div를 클릭하고 다른 div가 클릭되면 (닫기 버튼이 될 것임) 코드가 작동하지 않으면 다시 Div Fadein을 만들려고 노력하고 있습니다.
CSS는 다음과 같습니다.
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>
그리고 JavaScript
$(document).ready(function(){
$("button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
해결책
"."가 필요합니다. button_contact 전에
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
다른 팁
jQuery는 또한 .toggle () 함수가있어 요소를 클릭 할 때 서로간에 "토글링"되는 다중 기능을 전달할 수 있습니다.
http://api.jquery.com/toggle/ 원하는만큼의 기능을 추가 할 수 있기 때문에 좋은 기능입니다.
$(document).ready(function(){
$(".button_contact").toggle(function() {
$("#contact_form").fadeIn("slow");
},
function() {
$("#contact_form").fadeOut("slow");
});
});
당신은 잊어 버렸습니다. 버튼을 닫기 전에 ...
$(".button_contact")....
작동해야합니다
Fadein 버튼의 선택기는 약간 꺼져 있습니다. 원래 코드는 요소와 일치합니다 노드 이름 의 button_contact
a 수업 의 button_contact
.
노력하다:
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$ ( "button_contact"). 클릭 (function () {
$(".button_contact").click(function() {
이 시도:
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".button_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
미안하지만 클릭중인 링크가 다른 div에 해당하는 ajax 링크 인 경우이 구문이 작동합니까? 나는 그것을 작동시킬 수없는 것 같다!
<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>
제휴하지 않습니다 StackOverflow