jQuery fadeIn fadeOut点击

Question

jQuery fadeIn fadeOut点击

Bru*_*uno 6 javascript jquery click fadeout fadein

当点击另一个div时,我试图制作一个div fadeIn,当点击另一个div时再次fadeOut(这将是关闭按钮)但是我的代码不起作用,我忘记了什么吗？

这是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;
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

和JavaScript

$(document).ready(function(){ 

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

scu*_*ffe 10

你需要"." 在button_contact之前

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mik*_*ike 9

jquery还有一个.toggle()函数,允许您在单击元素时传递在彼此之间"切换"的多个函数.

http://api.jquery.com/toggle/一个很好的功能,因为你可以添加任意数量的功能.

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，11 月前
查看次数：	38642 次
最近记录：	14 年，11 月前