Fade-Effekt auf dem Display = "Block" Aktion in Javascript

Question

Ich habe einige Javascript, die zwischen 3 divs beim Klicken auf 1 von 3 Tabs wechselt.

Hier ist mein Javascript:

(function($){ 
    $.fn.acidTabs = function(options) {  
      var settings = { 
         'style' : 'one' 
      };  
       options = $.extend(settings, options); 
       return this.each (function() {  
        var o = options; 
        container = this; 
        container.setAttribute("class",o.style); 
        var navitem = container.querySelector("li"); 
        //store which tab we are on 
        var ident = navitem.id.split("_")[1]; 
        navitem.parentNode.setAttribute("data-current",ident); 
        //set current tab with class of activetabheader 
        navitem.setAttribute("class","tabActiveHeader"); 

        //hide two tab contents we don't need 
        var pages = container.querySelectorAll(".tabpage"); 
        for (var i = 1; i < pages.length; i++) { 
         pages[i].style.display="none"; 
        } 

        //this adds click event to tabs 
        var tabs = container.querySelectorAll("li"); 
        for (var i = 0; i < tabs.length; i++) { 
         tabs[i].onclick=displayPage; 
        } 
       }); 

       // on click of one of tabs 
        function displayPage() { 
         var current = this.parentNode.getAttribute("data-current"); 
         //remove class of activetabheader and hide old contents 
         document.getElementById("tabHeader_" + current).removeAttribute("class"); 
         document.getElementById("tabpage_" + current).style.display="none"; 

         var ident = this.id.split("_")[1]; 
         //add class of activetabheader to new active tab and show contents 
         this.setAttribute("class","tabActiveHeader"); 
         document.getElementById("tabpage_" + ident).style.display="block"; 
         this.parentNode.setAttribute("data-current",ident); 
        } 
      }; 
})(jQuery); 

Ich kann nicht scheinen dies zu modifizieren Fading-Effekte zu akzeptieren. Oder vielleicht gibt es einen besseren Weg, dies zu tun?

Würde deine Hilfe lieben! Danke.

Answer 1

es ist nicht einfach, weil Sie es nicht tun können. Sie müssen die beiden CSS-Anweisungen aufteilen.

Neues div mit Opazität: 0 und Anzeige: keine Anzeige auf Block ändern und dann die Opazität mit setTimeout ändern (sogar eine 10ms Verzögerung reicht).

tun Sie das Gegenteil für das Div, das versteckt wird.

etwas wie folgt aus:

var newdiv=document.getElementById("tabpage_" + ident); 
newdiv.style.display="block"; 
setTimeout(function(){newdiv.style.opacity="1";},10); 

Answer 2

OK rechnete es aus dem asp.net Forum mit etwas Hilfe. Ersetze die Funktion displayPage() mit dieser: