加载页面时Jquery颜色更改效果？

Question

所以我在我的网站上测试了一个颜色转换器，它的工作原理是我想要的，无论如何大部分都是如此。我有这个问题，每次我重新加载页面时，它会在用曲奇饼换成所选颜色之前一瞬间选择原始颜色。

我想要的是重新加载或加载没有变色效果的新页面。 是的，我知道我的代码可能会被简化，但我仍然是jquery的新手。

为了澄清一点，基本上看看这个链接Preview of changing effect，它会在瞬间从橙色（原始颜色）切换到所选颜色（紫色）。

$(document).ready(function(){
$(".red").click(function(){
   $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#c13333"});
    $("#cssmenu").css({"border-top-color":"#c13333"});
    $("#cssmenu").css({"border-bottom-color":"#c13333"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#c13333"});
    $(".settings").css({"border":"1px solid #c13333"});

   $("#selectcolor").addClass("red");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","red",{expires:999});
});

   $(".blue").click(function(){
   $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#447eab"});
    $("#cssmenu").css({"border-top-color":"#447eab"});
    $("#cssmenu").css({"border-bottom-color":"#447eab"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#447eab"});
    $(".settings").css({"border":"1px solid #447eab"});

   $("#selectcolor").addClass("blue");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","blue",{expires:999});
});

$(".green").click(function(){
   $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#74aa44"});
    $("#cssmenu").css({"border-top-color":"#74aa44"});
    $("#cssmenu").css({"border-bottom-color":"#74aa44"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#74aa44"});
    $(".settings").css({"border":"1px solid #74aa44"});

   $("#selectcolor").addClass("green");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","green",{expires:999});
});
   $(".orange").click(function(){
    $(".title a, .title a:visited,a,a:visited").css({"color":"#FD8A17"});
    $("#cssmenu").css({"border-top":"3px solid #FD8A17","border-bottom":"3px solid #FD8A17"});
    $("#cssmenu > ul > li > a").css({"color":"#FD8A17"});
    $("li.active > a").css({"color":"#444 !important"});
    $(".settings").css({"border":"1px solid #FD8A17"});

   $("#selectcolor").addClass("orange");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","orange",{expires:999});
});

   $(".purple").click(function(){
    $(".title a, .title a:visited,a,a:visited").css({"color":"#6646af"});
    $("#cssmenu").css({"border-top":"3px solid #6646af","border-bottom":"3px solid #6646af"});
    $("#cssmenu > ul > li > a").css({"color":"#6646af"});
    $("li.active > a").css({"color":"#444 !important"});
    $(".settings").css({"border":"1px solid #6646af"});

   $("#selectcolor").addClass("purple");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","purple",{expires:999});
});


// Start all Dark Colors


$(".dark-red").click(function(){
     $(".title a, .title a:visited,a,a:visited").css({"color":"#8c2525"});
     $("#cssmenu").css({"border-top":"3px solid #8c2525","border-bottom":"3px solid #8c2525"});
     $("#cssmenu > ul > li > a").css({"color":"#8c2525"});
     $("li.active > a").css({"color":"#444 !important"});
     $(".settings").css({"border":"1px solid #8c2525"});

   $("#selectcolor").addClass("dark-red");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","dark-red",{expires:999});
});

$(".dark-blue").click(function(){
     $(".title a, .title a:visited,a,a:visited").css({"color":"#336184"});
     $("#cssmenu").css({"border-top":"3px solid #336184","border-bottom":"3px solid #336184"});
     $("#cssmenu > ul > li > a").css({"color":"#336184"});
     $("li.active > a").css({"color":"#444 !important"});
     $(".settings").css({"border":"1px solid #336184"});

   $("#selectcolor").addClass("dark-blue");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","dark-blue",{expires:999});
});

$(".dark-green").click(function(){
     $(".title a, .title a:visited,a,a:visited").css({"color":"#547C2E"});
     $("#cssmenu").css({"border-top":"3px solid #547C2E","border-bottom":"3px solid #547C2E"});
     $("#cssmenu > ul > li > a").css({"color":"#547C2E"});
     $("li.active > a").css({"color":"#444 !important"});
     $(".settings").css({"border":"1px solid #547C2E"});

   $("#selectcolor").addClass("dark-green");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-orange");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","dark-green",{expires:999});
});

$(".dark-orange").click(function(){
     $(".title a, .title a:visited,a,a:visited").css({"color":"#c46811"});
     $("#cssmenu").css({"border-top":"3px solid #c46811","border-bottom":"3px solid #c46811"});
     $("#cssmenu > ul > li > a").css({"color":"#c46811"});
     $("li.active > a").css({"color":"#444 !important"});
     $(".settings").css({"border":"1px solid #c46811"});

   $("#selectcolor").addClass("dark-orange");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-purple");
    $.cookie("mycookie","dark-orange",{expires:999});
});

$(".dark-purple").click(function(){
     $(".title a, .title a:visited,a,a:visited").css({"color":"#49337f"});
     $("#cssmenu").css({"border-top":"3px solid #49337f","border-bottom":"3px solid #49337f"});
     $("#cssmenu > ul > li > a").css({"color":"#49337f"});
     $("li.active > a").css({"color":"#444 !important"});
     $(".settings").css({"border":"1px solid #49337f"});

   $("#selectcolor").addClass("dark-purple");
   $("#selectcolor").removeClass("blue");
   $("#selectcolor").removeClass("green");
   $("#selectcolor").removeClass("red");
   $("#selectcolor").removeClass("orange");
   $("#selectcolor").removeClass("purple");
   $("#selectcolor").removeClass("dark-red");
   $("#selectcolor").removeClass("dark-blue");
   $("#selectcolor").removeClass("dark-green");
   $("#selectcolor").removeClass("dark-orange");
    $.cookie("mycookie","dark-purple",{expires:999});
});


//Check if cookie exists
if (typeof $.cookie('mycookie') === "undefined"){
//no cookie
} else {
//cookie is there, do something

$("#selectcolor").addClass($.cookie('mycookie'));
$("a,a:visited,#cssmenu > ul > li > a,a,.title a,t.itle a:visited,#cssmenu").addClass("red");

if ($("#selectcolor").hasClass("red")) {
   // $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#c13333"});
   // $("#cssmenu").css({"border-top-color":"#c13333"});
   // $("#cssmenu").css({"border-bottom-color":"#c13333"});
   // $("#cssmenu #menu-indicator").css({"border-bottom-color":"#c13333"});


}else if ($("#selectcolor").hasClass("blue")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#447eab"});
    $("#cssmenu").css({"border-top-color":"#447eab"});
    $("#cssmenu").css({"border-bottom-color":"#447eab"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#447eab"});

}else if ($("#selectcolor").hasClass("green")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#74aa44"});
    $("#cssmenu").css({"border-top-color":"#74aa44"});
    $("#cssmenu").css({"border-bottom-color":"#74aa44"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#74aa44"});

}else if($("#sectcolor").hasClass("orange")){
    $.removeCookie('mycookie', { path: '/' });

}else if ($("#selectcolor").hasClass("purple")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#6646AF"});
    $("#cssmenu").css({"border-top-color":"#6646AF"});
    $("#cssmenu").css({"border-bottom-color":"#6646AF"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#6646AF"});


}else if ($("#selectcolor").hasClass("dark-red")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#8c2525"});
    $("#cssmenu").css({"border-top-color":"#8c2525"});
    $("#cssmenu").css({"border-bottom-color":"#8c2525"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#8c2525"});


}else if ($("#selectcolor").hasClass("dark-blue")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#336184"});
    $("#cssmenu").css({"border-top-color":"#336184"});
    $("#cssmenu").css({"border-bottom-color":"#336184"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#336184"});


}else if ($("#selectcolor").hasClass("dark-green")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#547c2e"});
    $("#cssmenu").css({"border-top-color":"#547c2e"});
    $("#cssmenu").css({"border-bottom-color":"#547c2e"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#547c2e"});


}else if ($("#selectcolor").hasClass("dark-orange")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#c46811"});
    $("#cssmenu").css({"border-top-color":"#c46811"});
    $("#cssmenu").css({"border-bottom-color":"#c46811"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#c46811"});

}else if ($("#selectcolor").hasClass("dark-purple")){
    $("a,a:visited,#cssmenu > ul > li > a,.title a,.title a:visited,.title a:hover").css({"color":"#49337f"});
    $("#cssmenu").css({"border-top-color":"#49337f"});
    $("#cssmenu").css({"border-bottom-color":"#49337f"});
    $("#cssmenu #menu-indicator").css({"border-bottom-color":"#49337f"});
}
}
});

Answer 1

所以我已经通过使用css

找到了我的问题的答案

html{visibility:hidden}

和jquery

$(document).ready(function(){ document.getElementsByTagName("html")[0].style.visibility = "visible"; });