widoczność: widoczny/ukryty div

Question

Jaki jest najlepszy sposób pokazania elementu div po kliknięciu przycisku, a następnie ukrycie go za pomocą przycisku zamykania?

Mój kod jQuery jest w następujący sposób:

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

wyjątkiem problemu Mam to zamyka się automatycznie bez żadnych kliknięć. Ładuje wszystko dobrze, wyświetla przez około 1/2 sekundy, a następnie zamyka. Jakieś pomysły?

Answer 1

Można użyć show i hide metody:

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

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

Answer 2

co można uzyskać płynniejsze przejścia przy użyciu metod blaknięcie:

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

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

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

Demo: http://jsbin.com/uhapom/edit#javascript,html,live

Answer 3

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

Answer 4

Inną opcją :

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

Można również użyć fadeToggle i slideToggle

Answer 5

zależności od zapotrzebowania, wierzę, czego potrzebujesz jest tak proste, jak to: http://jsfiddle.net/linmic/6Yadu/

Jednak użycie widoczność różni się od używania pokaz/ukryj funkcję, krwawe detale: What is the difference between visibility:hidden and display:none?