एनीमेशन के साथ छुपा div दिखाएं

Question

मैंने यह स्क्रिप्ट बनाई है, जो दाएं वर्ग के साथ एक div खोलता है और दूसरों को बंद करता है।

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     divs[i].style.display = "none"; 
    } 
    divid.style.display = "block"; 
    } 
    return false; 
} 

क्या कुछ एनीमेशन बनाना पसंद है, जैसे कि इसे डिस्प्ले विकल्पों द्वारा दिखाने के बजाय फडआउट, सहजता?

Answer 1

आप की कोशिश कर सकते इस

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     $(divs[i]).fadeOut("slow"); 
    } 
    $(divid).fadeIn("slow"); 
    } 
    return false; 
} 

इस बेला "http://jsfiddle.net/9jtd3/"

कई अधिक है jQuery पुस्तकालय द्वारा प्रदान की तकनीक रहे हैं पर एक नज़र डालें, आपको लगता है कि इस पर एक नज़र भी होनी चाहिए।

Answer 2

आप लाइब्रेरी का उपयोग करके jQuery या कुछ ऐसा कर सकते हैं।

आप इसे सादा जावास्क्रिप्ट का उपयोग करके सुनिश्चित कर सकते हैं, लेकिन ऐसा कोई बात नहीं है क्योंकि jQuery एक अद्भुत लाइब्रेरी है।

show और hide

Answer 3

This के कुछ उदाहरण निश्चित रूप से आपकी समस्या का समाधान होगा देखें।

यदि आप अपनी स्क्रिप्ट में jQuery लाइब्रेरी शामिल करते हैं तो आप सीधे .fadeOut() का उपयोग कर सकते हैं।

Answer 4

आप jQuery फिर एक और तरीका यह है उपयोग कर रहे हैं

function showhide(id) { 
    $(".hideable".fadeOut("slow"); 
    $("#" + id).fadeIn("slow"); 
} 

मान लिया जाये कि className के रूप में "hideable" divs

गुड लक के अपने समूह में है।

Answer 5

यह केवल सीएसएस के साथ आसान तरीका है।

आप एक वर्ग बनाने

div { 
display:block; 
transition: all .2s ease-out; 
} 

.hidden { 
display:none; 
} 

और जावास्क्रिप्ट के साथ, आप लागू करना या वर्ग छिपा को दूर जब आप करना चाहते हैं। jQuery एनीमेशन lib उपयोग करने के लिए अच्छा से दूर है। यह घबराहट है, और अपने उपयोगकर्ता के लिए खाना संसाधन ressource। सीएसएस आपके जीपीयू के साथ काम करता है, जिससे अधिक द्रव एनीमेशन की अनुमति मिलती है।

Answer 6

आप jQuery

$(document.body).click(function() { 
    if ($("div:first").is(":hidden")) { 
    $("div").slideDown("slow"); 
    } else { 
    $("div").slideUp("slow"); 
    } 
});