jQuery fadeIn fadeOut 点击

发布于 2024-08-14 20:28:48 字数 1815 浏览 8 评论 0原文

我试图在单击另一个 div 时使 div 淡入，并在单击另一个 div 时再次淡出（这将是关闭按钮），但我的代码不起作用，我是否忘记了什么？

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

原文

I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something?

Here's the 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;
}

The 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>

and the JavaScript

$(document).ready(function(){ 

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

念三年u 2024-08-21 20:28:48

你需要“。”在按钮_联系之前

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

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

you need the "." before button_contact

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

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

回复收藏 0 原文

笑红尘 2024-08-21 20:28:48

jQuery 还有一个 .toggle() 函数，允许您传递当单击元素时相互之间切换的多功能函数。

http://api.jquery.com/toggle/ 一个不错的功能，因为您可以添加尽可能多的如您所愿。

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

jQuery also has a .toggle() function that allows you to pass multi-functions that are toggled between each other when the element/s are clicked.

http://api.jquery.com/toggle/ a nice function because you can add as many functions as you want.

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

回复收藏 0 原文

一向肩并 2024-08-21 20:28:48

您在按钮关闭之前忘记了 .：

$(".button_contact")....

应该可以。

You forgot a . before the button close:

$(".button_contact")....

Should work.

回复收藏 0 原文

只为一人 2024-08-21 20:28:48

淡入按钮上的选择器有点关闭。您的原始代码匹配节点名称为button_contact的元素，而不是类为button_contact的元素。

尝试：

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

The selector on your fadeIn button is a bit off. Your original code matches an element with a node name of button_contact not with a class of button_contact.

Try:

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

回复收藏 0 原文

辞取 2024-08-21 20:28:48

$("button_contact").click(function() { 应该是

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

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

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

回复收藏 0 原文

烟酉 2024-08-21 20:28:48

试试这个：

$(document).ready(function(){ 

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

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

Try this:

$(document).ready(function(){ 

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

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

回复收藏 0 原文

流年里的时光 2024-08-21 20:28:48

抱歉，如果单击的链接是对应于另一个 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>

I'm sorry but will this syntax work if the link being clicked is an ajax link corresponding to another DIV? I can't seem to get it to work!

<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>

回复收藏 0 原文

~没有更多了~