visibilidad: visible/oculto div

Question

¿Cuál es la mejor manera de mostrar un div cuando se hace clic en un botón y luego ocultarlo con un botón de cerrar?

Mi código jQuery es la siguiente:

$(".imageIcon").click(function(){ 
$('.imageShowWrapper').css("visibility", 'visible'); 
}); 
$(".imageShowWrapper").click(function(){ 
$('.imageShowWrapper').css("visibility", 'hidden'); 
}); 

excepto el problema que estoy teniendo es que se cierra automáticamente y sin ningún tipo de clics. Carga todo bien, se muestra durante aproximadamente 1/2 segundo y luego se cierra. ¿Algunas ideas?

Answer 1

Puede utilizar los show y hide métodos:

$(".imageIcon").click(function() { 
    $('.imageShowWrapper').show(); 
}); 

$(".imageShowWrapper").click(function() { 
    $(this).hide(); 
}); 

Answer 2

Puede conseguir una transición más suave utilizando los métodos de fundido:

var imageIcon = $(".imageIcon"), 
    imageShowWrapper = $(".imageShowWrapper"); 

imageIcon.on("click", function(){ 
    imageShowWrapper.stop().fadeIn(); 
}); 

imageShowWrapper.on("click", function(){ 
    $(this).stop().fadeOut(); 
}); 

Demostración: http://jsbin.com/uhapom/edit#javascript,html,live

Answer 3

$(".imageIcon, .imageShowWrapper").click(function(){ 
    $('.imageShowWrapper').toggle(); 
}); 

Answer 4

Otra opción :

$(".imageIcon, .imageShowWrapper").click(function() { 
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));  
}); 

También puede utilizar fadeToggle y slideToggle

Answer 5

De acuerdo a sus requerimientos, creo que lo que necesita es tan simple como esto: http://jsfiddle.net/linmic/6Yadu/

Sin embargo, el uso de la visibilidad es diferente de usar mostrar/ocultar la función, detalles sangrientos: What is the difference between visibility:hidden and display:none?