दृश्यता: दृश्यमान/छुपा div

Question

बटन पर क्लिक करते समय div दिखाने का सबसे अच्छा तरीका क्या है और फिर इसे बंद बटन से छुपाएं ??

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

समस्या मैं आ रही है यह किसी भी क्लिक के बिना स्वचालित रूप से बंद है, सिवाय इसके:

मेरे Jquery कोड इस प्रकार है। यह सब ठीक है, लगभग 1/2 सेकंड के लिए प्रदर्शित करता है और फिर बंद हो जाता है। कोई विचार?

Answer 1

आप show और hide तरीकों का उपयोग कर सकते हैं:

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

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

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

डेमो:: http://jsbin.com/uhapom/edit#javascript,html,live

Answer 2

आप फीका तरीकों का उपयोग कर एक चिकनी संक्रमण मिलेगा :

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

तुम भी fadeToggle उपयोग कर सकते हैं और slideToggle

Answer 3

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

Answer 4

एक अन्य विकल्प

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

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

Answer 5

आपकी आवश्यकता के अनुसार, मेरा मानना ​​है कि क्या आप की जरूरत है इस के रूप में सरल है: http://jsfiddle.net/linmic/6Yadu/

हालांकि, दृश्यता का उपयोग कर शो का उपयोग कर से अलग है/फंक्शन छुपाएं, गोरो विवरण: What is the difference between visibility:hidden and display:none?