Javascriptのdisplay = "block"アクションのフェード効果

Question

3つのタブのうちの1つをクリックすると3つのdivを切り替えるjavascriptがあります。

は、ここに私の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); 

私はフェージング効果を受け入れるために、これをmodifiyように見える傾けます。それとももっと良い方法がありますか？

あなたのご協力が大好きです。 ありがとうございます。

Answer 1

あなたができないので簡単ではありません。 2つのcssステートメントを分割する必要があります。

新しいdiv：不透明度：0およびdisplay：なし ブロックを表示して に変更し、setTimeoutを使用して不透明度を変更します（10msの遅延さえも含みます）。

divを非表示にする場合は、その逆を行います。このような

何か：

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

Answer 2

OKはasp.netのフォーラムからいくつかの助けを借りてそれを考え出しました。関数displayPage（）を次のように置き換えます。

var current = this.parentNode.getAttribute("data-current"); 
//remove class of activetabheader and hide old contents 
$('#tabHeader_' + current).removeClass('tabActiveHeader'); 
$('#tabpage_' + current).hide(); 

var ident = this.id.split("_")[1]; 
//add class of activetabheader to new active tab and show contents 
$(this).addClass("tabActiveHeader"); 
$('#tabpage_' + ident).fadeIn(); 
this.parentNode.setAttribute("data-current",ident);