在顯示器上的淡入淡出效果=在Javascript中「阻止」動作

我有一些JavaScript在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);

我似乎無法更改這個接受衰減效應。或者也許有更好的方法來做到這一點？

想得到您的幫助！謝謝。

來源

2012-04-06 Junglecom

jQuery的這個複雜的，我會建議創建的jsfiddle（http://jsfiddle.net）;它真的幫助人們回答你的問題。 – 2012-04-06 04:04:14

我只需要一些我可以使用的.style.display =「block」來創建淡入淡出效果。不需要淡出。 – Junglecom 2012-04-06 07:37:49

任何人？請幫忙。似乎很容易 – Junglecom 2012-04-17 10:46:49

這不容易，因爲你做不到。您需要拆分兩個css語句。

具有不透明度的新div：0和顯示：無將顯示更改爲阻止，然後使用setTimeout更改不透明度（即使延遲10ms也可以）。

對隱藏的div做相反的處理。

是這樣的：

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

來源

2012-04-17 17:27:15 BigBalli

確定了它從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);

來源

2012-04-24 05:12:37 Junglecom

在顯示器上的淡入淡出效果=在Javascript中「阻止」動作

回答

相關問題