jQuery et 2 fadeIn en un clic

Est-ce la bonne façon de faire 2 divs fadeIn ensemble? (Contact_close devrait être de Infront contact_box pour servir un bouton de fermeture pour contact_boxjQuery et 2 fadeIn en un clic

EDIT: Correction de quelques divnames

Javascript

$(document).ready(function(){ 

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

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

}..);

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_box{ 
    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_box"> 
     <div class="contact_close"></div></div> 
</div> 
</body> 
</html>

Source

2009-12-18 Bruno

Si vous voulez que le bouton de fermeture et la boîte de contact s'animent exactement de la même manière, et que le bouton de fermeture se trouve dans la boîte de dialogue div - pourquoi ne pas simplement masquer la boîte de contact? – micahwittman

Oui, c'est très bien.

Il y a plusieurs façons de faire beaucoup de choses, mais quelque chose d'aussi simple ne nécessite pas une approche très technique.

Source

2009-12-18 20:54:10 Sampson

Je n'ai pas analysé votre code à fond, mais il semble plus logique de placer la boîte de fermeture à l'intérieur de la div, pas à côté.

Source

2009-12-18 22:08:32 user187291

Vous pouvez les effacer à la fois dans la même déclaration avec

$('#contact_box, .contact_close').fadeIn('slow')

Ceci est plus efficace parce que jQuery commence une opération de fondu.

Source

2009-12-18 22:12:13 sakabako

jQuery et 2 fadeIn en un clic

Répondre

Questions connexes