디스플레이의 페이드 효과 = 자바 스크립트의 "블록"동작

Question

3 개의 탭 중 하나를 클릭하면 3 개의 div로 전환되는 자바 스크립트가 있습니다.

여기 내 자바 스크립트입니다 :

(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

당신이 할 수 없기 때문에 쉽지 않습니다. 두 개의 css 문을 분할해야합니다. 블록 다음의 setTimeout (DO 것조차 10ms의 지연)을 이용하여 불투명도를 변경 없음 표시 전환 : 불투명도

새로운 DIV 0 디스플레이.

숨길 div에 대해 반대 작업을 수행합니다. 이 같은

뭔가 :

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

Answer 2

확인을 asp.net 포럼에서 일부 도움을 알아 냈어. function 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);