مسج fadeIn الاختفاء التدريجي مع ضغطة

StackOverflow https://stackoverflow.com/questions/1930502

سؤال

وأنا أحاول أن جعل شعبة fadeIn عند النقر آخر 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>

ووجافا سكريبت 

$(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"); 
  });
});

نصائح أخرى

وله مسج أيضا وظيفة .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 ليس مع الدرجة من button_contact.

وجرب: 

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

و$ ( "button_contact"). انقر (وظيفة () {يجب أن يكون 

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

وجرب هذا: 

$(document).ready(function(){ 

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

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

وأنا آسف ولكن هذا العمل في بناء الجملة إذا كان الارتباط الذي تم النقر عليه وصلة اياكس الموافق 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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top