Javascript 中 display="block" 动作的淡化效果答案

【问题标题】：Fade effect on display="block" action in JavascriptJavascript 中 display="block" 动作的淡化效果
【发布时间】：2012-04-19 19:17:02
【问题描述】：

我有一些 javascript 在单击 3 个选项卡中的 1 个时在 3 个 div 之间切换。

这是我的 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);

我似乎无法修改它以接受褪色效果。或者也许有更好的方法来做到这一点？

希望得到您的帮助！谢谢。

【问题讨论】：

对于这种复杂的 jQuery，我建议创建一个 JSFiddle (jsfiddle.net)；它确实可以帮助人们回答您的问题。
我只需要一些可以与 .style.display="block" 一起使用的东西来创建淡入效果。不需要淡出。
有人吗？？？请帮忙。看起来很简单
正如@Ethan 所说，创建一个显示问题的小提琴。

标签： javascript jquery fadein css-transitions

【解决方案1】：

好的，在 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);

【讨论】：

【解决方案2】：

这并不容易，因为你做不到。您需要拆分两个 css 语句。

具有 opacity:0 和 display:none 的新 div 将显示更改为阻止然后使用 setTimeout 更改不透明度（即使延迟 10 毫秒也可以）。

对要隐藏的 div 执行相反的操作。

类似这样的：

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

【讨论】：