Jquery加载页面时的颜色更改效果
Jquery color changing effect when loading the page?
所以我在我的网站上测试了一个颜色转换器，它按照我想要的方式工作，不管怎样，大部分情况下都很好。我有这样的问题，每次我重新加载页面时，它都会在使用cookie更改为所选颜色之前的一瞬间选择原始颜色。
我想要的是在没有变色效果的情况下重新加载或加载新页面。是的，我知道我的代码可能会被简化，但我对jquery还是个新手。
为了更基本地澄清这一点，请看这个链接更改效果的预览，它在一瞬间从橙色（原始颜色）切换到选定的颜色（紫色）。
$(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"});
}
}
});
所以我已经通过使用css 找到了问题的答案
html{visibility:hidden}
和jquery
$(document).ready(function(){
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
相关文章：
- Jquery加载页面时的颜色更改效果
- 在内联颜色框中加载mediaelementjs，在关闭时暂停视频
- IE错误，视频加载在颜色框中
- 如何更改颜色按钮无需重新加载页面
- 我们可以使用 Javascript 更改加载的 SVG 文件的颜色吗?
- 更改页面加载离子的导航栏颜色
- 加载后更改字体的颜色
- 在关闭颜色框时重新加载父窗口
- 减少jQuery颜色动画的加载时间
- 使用颜色框在弹出窗口中加载外部网站
- 如何在加载 Web 图像(非本地）时替换/遮罩特定颜色
- 根据字段值更改页面加载时的按钮颜色
- 通过 loadURL 函数加载标记图层时更改地图框中的标记颜色
- 在加载时更改表行的颜色
- 页面加载时背景颜色发生变化
- JQuery颜色选择器在页面加载时显示
- 即使在使用Javascript重新加载页面后，也可以通过单击来保持选定的颜色
- 如何仅在激活颜色框弹出窗口时加载内容
- 如何用JSONLoader改变在js中加载的对象的颜色
- 平滑动画背景颜色不透明度后，基础图像加载
