Эффект затухания при отображении = действие «блок» в Javascript

Question

У меня есть javascript, который переключается между 3 divs при нажатии 1 из 3 вкладок.

Вот мой 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); 

Я не могу показаться, чтобы редактировать этот принимать выцветанию эффекты. Или, может быть, есть лучший способ сделать это?

Любить вашу помощь! Спасибо.

Answer 1

Это не легко, потому что вы не можете этого сделать. Вам нужно разбить две инструкции css.

Новый div с непрозрачностью: 0 и дисплей: нет изменить отображение на блок , а затем изменить непрозрачность с помощью setTimeout (даже задержка 10 мс сделает).

сделать противоположное для 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);