Javascript 使用.addclass调用var会导致分秒空白_Javascript_Jquery

Javascript 使用.addclass调用var会导致分秒空白

javascript jquery

Javascript 使用.addclass调用var会导致分秒空白,javascript,jquery,Javascript,Jquery,我正在使用下面的代码来更改页面上的内容，但是正如您在上面看到的，当一个类淡出，另一个类进入时，它会在瞬间造成一个空白。有没有更好的方法来调用旧类之上的新类，然后淡出下面的类，或者其他不会导致相同问题的方法抱歉，如果这是一个愚蠢的问题，但JQuery不是我的强项 var Monday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\

我正在使用下面的代码来更改页面上的内容，但是正如您在上面看到的，当一个类淡出，另一个类进入时，它会在瞬间造成一个空白。有没有更好的方法来调用旧类之上的新类，然后淡出下面的类，或者其他不会导致相同问题的方法

抱歉，如果这是一个愚蠢的问题，但JQuery不是我的强项

var Monday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Mondays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Monday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Monday\">";
            var Tuesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Tuesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Tuesday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Tuesday\">";
            var Wednesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Wednesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">#Midweek Madness<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"#Midweek Madness\">";
            var Thursday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Thursdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Thursday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Thursday\">";
            var Friday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Fridays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Friday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Friday\"><\/img>";
            var Saturday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Saturdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Saturday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Saturday\">";
            var Sunday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Sundays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Sunday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Sunday\">";

            jQuery( document ).ready(function( $ ) {

                $('.ng1_widget_event_nights ul li a').click( function(e) {
                    event.preventDefault(); // prevent the default action
                    event.stopPropagation(); // stop the click from bubbling
                    $(this).closest('ul').find('.active').removeClass('active');
                });

                $( ".mon_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Monday).fadeIn('slow');
                });
                $( ".tue_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Tuesday).fadeIn('slow');
                });
                $( ".wed_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Wednesday).fadeIn('slow');
                });
                $( ".thu_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Thursday).fadeIn('slow');
                });
                $( ".fri_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Friday).fadeIn('slow');
                });
                $( ".sat_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Saturday).fadeIn('slow');
                });
                $( ".sun_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Sunday).fadeIn('slow');
                });
            });

本周一的VAP>码>VAP>周一的VAP>VAP>周一的VAP>VAP>码码>周一周一的瓦瓦瓦瓦瓦瓦瓦瓦瓦<<<周一周一的瓦瓦瓦瓦瓦瓦瓦瓦<<<周一周一<<\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t##########\n\t\t\t\t\t\t\t在线图书\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t”；本周二的VaVaR星期二的VaVaR周日周日周日的Va1俱乐部NG1俱乐部NG1俱乐部NG1俱乐部的NG1俱乐部的NG1俱乐部的NG1俱乐部的NG1俱乐部的4月1俱乐部\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t#；本周三，本周三，本周三，本周三，本周三，本\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\#；本周四VAVAR周四瓦瓦瓦瓦瓦瓦瓦瓦瓦周四。”\n\\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t周四周四周四在NG1俱乐部1俱乐部NG1俱乐部1俱乐部NG1俱乐部1俱乐部1俱乐部1俱乐部1俱乐部1俱乐部1俱乐部4 4 4 4 4 4-1俱乐部1俱乐部1俱乐部1俱乐部1俱乐部1俱乐部3\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t#；本周五VaVaVaR周五周五瓦瓦瓦瓦瓦瓦瓦瓦周五。”\n\\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t#；本周六的VaVaVaVaR周日周日周日的7.n\\\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t#；本周日的VaVaVaR周日周日的VaVaVaVa周日=“\n\\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\\t\t\t\t\t\t\t\t\t\\\#； jQuery（文档）.ready（函数（$）{ $（'.ng1\u widget\u event\u li a'）。单击（函数（e）{ event.preventDefault（）；//阻止默认操作 event.stopPropagation（）；//停止单击以防止冒泡 $（this）.closest（'ul'）.find（'.active'）.removeClass（'active'）； }); $（“.mon_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期一）.fadeIn（'slow'）； }); $（“.tue_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期二）.fadeIn（'slow'）； }); $（“.wed_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期三）.fadeIn（'slow'）； }); $（“.thu_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期四）.fadeIn（'slow'）； }); $（“.fri_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期五）.fadeIn（'slow'）； }); $（“.sat_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（星期六）.fadeIn（'slow'）； }); $（“.sun_click”）。单击（函数（）{ $（此）.addClass（“活动”）； $（“.ng1_widget_event”）.hide（）.html（Sunday.fadeIn（'slow'）； }); }); 编辑：



正文


正文

您可以在同一位置使用绝对定位的div，所有div都是透明的（不透明度为0；），但不透明度为1的div是可见的。在触发器上启动一个计时器，同时提高项目的不透明度以使其可见，并降低项目的不透明度以淡出，直到不透明度达到所需的程度

function switchDiv(fadeInDiv, fadeOutDiv) {
    if (fadeInDiv.style.opacity == 1) return;
    fadeInDiv.style.opacity = fadeInDiv.style.opacity+0.1;
    fadeOutDiv.style.opacity = fadeOutDiv.style.opacity-0.1;
    setTimeout(fade(fadeInDiv, fadeOutDiv), 500/*this indicates speed, the highest the slowest*/;
}

但无法测试，快睡觉了

您好，谢谢您的帮助，我现在已将其设置为已编辑的结构：我如何对每个按钮调用此函数？您需要使用addEventListener函数将此函数绑定到按钮上发生的事件，例如单击或dblclick。您可以将每个事件绑定到不同的侦听器，但这并不好；最好委托给父节点，然后检查event.source以获取事件的源（生成事件的特定按钮）。另外，您需要为当前显示的元素提供资金，以便将其输入fadeoutdiv参数，而fadeindiv参数将是使visibleHi的元素。谢谢您的解释，但这对我来说太复杂了，因为我的javascript知识有限。但再次感谢你所付出的努力

function switchDiv(fadeInDiv, fadeOutDiv) {
    if (fadeInDiv.style.opacity == 1) return;
    fadeInDiv.style.opacity = fadeInDiv.style.opacity+0.1;
    fadeOutDiv.style.opacity = fadeOutDiv.style.opacity-0.1;
    setTimeout(fade(fadeInDiv, fadeOutDiv), 500/*this indicates speed, the highest the slowest*/;
}