javascript - Jquery fadeToggle 麻烦
问题描述
我正在构建一个 Web 应用程序，并试图合并动画以使其更易于使用。我是这个行业的新手，所以我确信有更好的方法可以做到这一点，所以提前为糟糕的代码道歉！
我有两个菜单：一个用于“部门”，另一个用于“菜单”。选择一个扇区后，将为该给定扇区填充几个菜单项。然后一旦选择了菜单项，右侧的空白部分将填充实际内容。（有点像仪表板？）
无论如何，正如您在代码中看到的那样，我不断地切换要显示哪些项目以及要隐藏哪些项目。（如果有捷径可以做到这一点，请告诉我！）
我遇到的问题是当我添加一个 fadeToggle() 时，我发现它最初可以工作，但最终应用程序会出现故障并循环。
我在代码中写了如果 pharma 画布是 display == none 然后再次显示欢迎消息，但它不工作..
理想情况下，我希望有一个高淡入淡出，这样我就可以在欢迎菜单上加入动画（点击任何东西之前出现的大橙色 div）
如果用户选择不同的菜单选项，是否有更好的方法来确保一旦发生淡入淡出它就会停止？
例如：如果我单击 Pharma，然后再次单击它（隐藏它）我想绝对确保它将 100% 隐藏并且不会再次开始褪色。
$( document ).ready(function() {
var pharmaCanvas = document.getElementById('pharmaceuticals_canvas');
var welcomeCanvas = document.getElementById('welcome_canvas');
var CK_canvas = document.getElementById('pharma_CK_canvas');
var QL_canvas = document.getElementById('pharma_QL_canvas');
$(pharmaCanvas).hide();
$(pharma_dashboard).hide();
$(pharma_CK_canvas).hide();
$(QL_canvas).hide();
$('.menuBtns').click(function(){
//This will decrease the left menu size on click//
$("#left_menu").toggleClass("menu_decrease");
$(".left_menu_title").toggleClass("menu_decrease_title");
});
$('#pharmBtn').click(function(){
//Opens up Overview, as default
$(pharmaCanvas).fadeToggle(3000);
//opens up the PHARMA Dashboard / Right Dashboard //
$(pharma_dashboard).toggle();
//Toggles the WELCOME Dashboard which is not secific to any sector's dashboard//
$(welcome_dashboard).toggle();
//The secondary menu/ dashboard menu item will turn grey //
$("#pharma_default").addClass("selected_item_grey");
//This is for the Background color of the menu will stay when sector is selected//
$("#pharma_left_menu").toggleClass("selected_left_menu_title");
//Hide all other canvases//
$(welcomeCanvas).hide();
$(pharma_CK_canvas).hide();
$(pharma_QL_canvas).hide();
$(welcomeCanvas).hide();
})
//Start Dashboard Journey Here//
$('#pharma_OBtn').click(function(){
$(pharmaCanvas).toggle();
$("#pharma_default").addClass("selected_item_grey");
$("#pharma_CK").removeClass("selected_item_grey");
$(pharma_CK_canvas).hide();
$(welcomeCanvas).hide();
$(pharma_QL_canvas).hide();
})
$('#pharma_CKBtn').click(function(){
$(pharma_CK_canvas).toggle();
$("#pharma_CK").addClass("selected_item_grey");
$("#pharma_default").removeClass("selected_item_grey");
$("#pharma_QL").removeClass("selected_item_grey");
$("#left_menu").addClass("");
$(pharmaCanvas).hide();
$(pharma_QL_canvas).hide();
})
$('#pharma_QLBtn').click(function(){
$(QL_canvas).toggle();
$("pharma_QL").addClass("selected_item_grey");
$("#pharma_default").removeClass("selected_item_grey");
$("#pharma_CK").removeClass("selected_item_grey");
$(pharmaCanvas).hide();
$(pharma_CK_canvas).hide();
})
//Our Functios Actions//
var supplyChainContent = document.getElementById('our_role_sc_content');
var researchContent = document.getElementById('our_role_rd_content');
var commercialContent = document.getElementById('our_role_com_content');
$(supplyChainContent).hide();
$(researchContent).hide();
$(commercialContent).hide();
//On button click the content will hide or show and toggle the matching class shadows.
$('#scBtn').click(function(){
$(supplyChainContent).toggle();
$('.our_functions_wrapper').toggleClass('our_functions_shadow_red');
$('.our_functions_wrapper').removeClass('our_functions_shadow_blue');
$('.our_functions_wrapper').removeClass('our_functions_shadow_orange');
$(researchContent).hide();
$(commercialContent).hide();
});
$('#rdBtn').click(function(){
$(supplyChainContent).hide();
$(researchContent).toggle();
$('.our_functions_wrapper').toggleClass('our_functions_shadow_orange');
$('.our_functions_wrapper').removeClass('our_functions_shadow_blue');
$('.our_functions_wrapper').removeClass('our_functions_shadow_red');
$(commercialContent).hide();
});
$('#comBtn').click(function(){
$(supplyChainContent).hide();
$(researchContent).hide();
$(commercialContent).toggle
$('.our_functions_wrapper').toggleClass('our_functions_shadow_blue');
$('.our_functions_wrapper').removeClass('our_functions_shadow_red');
$('.our_functions_wrapper').removeClass('our_functions_shadow_orange');
});
//NOT IN USE YET: Statement will be used when multiple canvases are active//
if($(pharmaCanvas).css('display')== 'none'){
console.log("All Elements are hidden")
$(welcomeCanvas).show();
}
});#s4-workspace{
overflow-x: hidden! important;
}
#WebPartWPQ4{
margin-right:-20px;}
body
{
font-family:"Arial"!important;
}
#tbl_CRM_A_wrapper
{
width: 1140px;
}
#containter_box
{
font-family:"Arial"!important;
margin:auto;
}
#container
{
width:100%;
margin:auto;
}
#contentBox {
margin-right: 0px !important;
margin-left:0px!important;
}
#contentBox table table {
padding: 5px 0px 10px 10px !important;
}
#s4-titlerow , .ms-core-sideNavBox-removeLeftMargin, #WebPartWPQ5_ChromeTitle, #ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField>p
{
display:none !important;
}
div.article, .contentRow, #contentRow
{
padding:0px !important;
}
.ms-webpart-chrome-title
{
display: none;
}
/* Main Section */
.main_container{
width:1260px;
height: 450px;
}
#canvas{
height: 450px;
overflow-y: scroll;
}
.column_right{
float: right;
position: relative;
width: 179px;
border-radius: 5px 0px 0px 5px;
margin-top: -240px;
z-index: 3;
height: 245px;
background-color: #f6f6fc;
}
::-webkit-scrollbar {
width: 10px;
background: white;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #dbdbdb;
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b1b0b0;
}
/* Menus */
#left_menu{
height: 450px;
width: 200px;
float: left;
background-color: #323896;
}
.main_menu_title{
font-family: Arial Black;
font-size: 25px;
text-decoration: none!important;
color: white!important;
margin-left: 10px;
margin-top: 10px;
}
.main_menu_subtitle{
font-family: Arial Black;
font-size: 12px;
color: white!important;
text-decoration: none!important;
margin-left: 10px;
margin-top: 5px;
}
.left_menu_title{
font-family: Arial Black!important;
font-size: 12px;
color: white!important;
margin-left: 10px;
margin-top: 10px;
height: 35px;
padding-left: 3px;
padding-top: 9px;
border-radius: 5px 0px 0px 5px;
text-decoration: none!important;
background: linear-gradient(to right, #323896 50%, #f6f6fc 50%) left;
background-size: 200%;
transition: .5s ease-out;
}
.left_menu_title:hover{
background-position: right;
color: #323896!important;
cursor: pointer;
text-decoration: none!important;
}
.menu_decrease{
width:115px!important;
transition: all .5s linear;
}
.menu_decrease_title{
font-size: 11px!important;
}
.menuBtns{
text-decoration: none!important;
}
.selected_left_menu_title{
color: #323896!important;
background: #f6f6fc!important;
}
.dashboard_menu_title{
font-family: Arial Black;
font-size: 25px;
color: #323896!important;
margin-left: 10px;
margin-top: 10px;
}
.dashboard_menu_subtitle{
font-family: Arial Black;
font-size: 12px;
color: #acacac!important;
margin-left: 10px;
margin-top: 5px;
}
#dashboard_menu{
height: 450px;
width: 200px;
float:left;
background-color: #f6f6fc;
box-shadow: 4px 0 5px -2px rgb(0 0 0 / 20%);
border-radius: 0px 5px 5px 0px;
}
.dashboard_menu_selection{
font-family: Arial Black;
font-size: 12px;
color: #acacac!important;
margin-left: 10px;
margin-top: 49px;
}
#greeting_section{
background-color: #ffa000;
margin-top: 20px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 525px;
height: 80px;
}
#greeting_section_1{
background-color: #ffa000;
margin-top: 140px;
border-radius: 10px;
padding: 5px;
margin-left: 107px;
display: inline-block;
position: relative;
width: 525px;
height: 137px;
}
#greeting_section_title{
color: white!important;
font-family: Arial Black;
font-size: 20px;
margin-left: 5px;
margin-top: 5px;
font-weight: bold;
}
#welcome_canvas #greeting_section_title{
margin-top: 20px;
}
#geeting_section_subTitle{
color: white!important;
font-family: arial;
font-size: 12px;
margin-left: 5px;
margin-top: 5px;
}
.our_role_wrapper{
box-shadow: 1px 1px 11px 2px rgb(0 0 0 / 10%);
margin-top: 5px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 525px;
height: 60px;
}
#our_role_pharma_section{
height: 100px!important;
}
.our_role_title{
color: #323896!important;
font-family: arial;
font-weight: bold;
font-size: 15px;
}
.title_wrapper_box{
background-color: white;
height: 30px;
margin-left: 35px;
margin-top: 20px;
width: 400px;
display: inline-block;
position: relative;
}
.carousel_arrow_box{
background-color: #f25767;
height: 20px;
width: 53px;
display: inline;
border-radius: 10px;
margin-left: 5px;
}
.arrows{
font-size: 14px;
font-weight: bold;
color: white!important;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
.role_box{
display: inline-block;
}
#role_text{
color: #474747!important;
font-family: arial;
font-size: 12px;
margin-left: 5px;
margin-top: 5px;
}
.functions_category_wrapper{
margin-top: 5px;
margin-left: 35px;
display: inline-block;
width: 725px;
height: 50px;
}
.functions_category_boxes{
width: 125px;
height: 50px;
border-radius: 5px;
display: inline-flex;
postion: relative;
}
.functionBtn{
text-decoration: none!important;
cursor: pointer;
}
#scBtn{
background-color: #f25767;
}
#rdBtn{
background-color: #ffa000;
margin-left: 10px;
}
#comBtn{
background-color: #00b5e2;
margin-left: 10px;
}
.functions_category_title{
color: white!important;
font-size: 11px;
font-family: Arial;
font-weight: bold;
margin-top: 8px;
}
#fuctions_commercial_text{
margin-top: 17px!important;
}
.functions_category_icons{
float: left;
height: 40px;
margin: 5px;
}
#supply_chain_icon{
width: 45px!important;
}
.our_functions_wrapper{
box-shadow: 1px 1px 11px 2px rgb(0 0 0 / 10%);
margin-top: 5px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 725px;
height: 180px;
}
.our_functions_shadow_red{
box-shadow: 1px 1px 11px 2px rgb(242 87 103 / 50%);
}
.our_functions_shadow_orange{
box-shadow: 1px 1px 11px 2px rgb(255 158 0 / 50%);
}
.our_functions_shadow_blue{
box-shadow: 1px 1px 11px 2px rgb(0 181 226 / 50%);
}
.our_docs_title{
color: #323896!important;
font-family: arial;
font-weight: bold;
font-size: 18px;
margin-left: 10px;
margin-top: 10px;
}
.our_agenda_title{
color: #323896!important;
font-family: arial;
font-weight: bold;
font-size: 18px;
margin-left: 10px;
}
.folder_icons{
height: 80px;
margin-left: 10px;
}
.center_text{
text-align: center!important;
}
.selected_item_grey{
color: grey!important;
font-size: 13px;
}
.dashboard_menu_selection:hover{
color: grey!important;
font-size: 13px;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- J Query Library -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- SPServices -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<!-- Main Content -->
<div class="main_container" id="welcome_container">
<div id="left_menu">
<h1 class="main_menu_title">Sector</h1>
<h1 class="main_menu_subtitle">Select Sector</h1>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="epsBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="enterpriseBtn" class="menuBtns"><h2 class="left_menu_title" id="">NOT IMPORTANT</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="consumerBtn" class="menuBtns"><h2 class="left_menu_title" id="">Blah</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="medBtn" class="menuBtns"><h2 class="left_menu_title" id="">Blah2</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="pharmBtn" class="menuBtns"><h2 class="left_menu_title" id="pharma_left_menu">Pharma</h2></a>
</div>
</div>
<div id="welcome_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">Menus</h1>
<h1 class="dashboard_menu_subtitle">Select Menu</h1>
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" style="margin-top: 100px;" >Please Select Sector to Display Menus</h2>
</div>
</div>
</div>
<div id="pharma_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">Menus</h1>
<h1 class="dashboard_menu_subtitle">Select Menu</h1>
<a id="pharma_OBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_default">Overview</h2>
</div>
</a>
<a id="pharma_CKBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_CK">CK</h2>
</div>
</a>
<a id="pharma_QLBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_QL">Quick Links</h2>
</div>
</a>
<a id="pharma_TrainBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Train">Training Materials</h2>
</div>
</a>
<a id="pharma_TeamBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Team">Team Members</h2>
</div>
</a>
</div>
</div>
<!-- Welcome Sector -->
<div id="welcome_canvas">
<div id="canvas">
<!-- Column Left Has: Greeting, Role, Functions Sections-->
<div class="column_left">
<!-- Greeting Section -->
<div id="greeting_section_1">
<h1 id="greeting_section_title" class="center_text">Welcome Platform</h1>
<p id="geeting_section_subTitle" class="center_text">Begin your journey by selecting a sector</p>
</div>
</div>
<!-- Canvas End -->
</div>
<!-- Canvas WRAPPER PER SECTOR End -->
</div>
<!-- *********************************** -->
<!-- ******** OVERVIEW SECTION ********* -->
<!-- *********************************** -->
<div id="canvas">
<div id="pharmaceuticals_canvas">
<!-- Column Left Has: Greeting, Role, Functions Sections-->
<div class="column_left">
<!-- Greeting Section -->
<div id="greeting_section">
<h1 id="greeting_section_title">Welcome to the Pharmaceuticals Dashboard</h1>
<p id="geeting_section_subTitle">Here you will find an overview of our process </p>
</div>
<!-- Our Role Section -->
<div class="title_wrapper_box">
<div class="role_box">
<h1 class="our_role_title">Pharmaceuticals</h1>
</div>
<div class="carousel_arrow_box"><h1 class="arrows"> < </h1> <h1 class="arrows"> > </h1></h1>
</div>
</div>
<div class="our_role_wrapper" id="our_role_pharma_section">
<div class="our_role_section" >
<p id="role_text">Driven by our commitment to patients, we bring innovative products, services, and solutions to people throughout the world. We recognize the impact of serious conditions on people’s lives, and we aim to empower people through disease awareness, education and access to quality care.</p>
</div>
</div>
</div>
<!-- Column Right Has: Docs and Contact/Our Team -->
<div class="column_right">
<div class="our_docs_wrapper">
<h1 class="our_docs_title">Our Docs</h1>
<div class="our_docs_section">
<img class="folder_icons" src="/folder_icon.png">
</div>
</div>
<div class="our_agenda_wrapper">
<h1 class="our_agenda_title">Agenda</h1>
<div class="our_agenda_section">
<img class="folder_icons" src="/Icons/folder_icon.png">
</div>
</div>
</div>
</div>
<!-- *********************************** -->
<!-- ************ CK SECTION *********** -->
<!-- *********************************** -->
<div id="pharma_CK_canvas">
<!-- Column Left Has: Greeting, Role, Functions Sections-->
<div class="column_left">
<!-- Greeting Section -->
<div id="greeting_section">
<h1 id="greeting_section_title">Welcome to the Pharmaceuticals Dashboard</h1>
<p id="geeting_section_subTitle">Customer Knowledge</p>
</div>
<!-- Our Role Section -->
<div class="title_wrapper_box">
<div class="role_box">
<h1 class="our_role_title">Our Role</h1>
</div>
<div class="carousel_arrow_box"><h1 class="arrows"> < </h1> <h1 class="arrows"> > </h1></h1>
</div>
</div>
<div class="our_role_wrapper">
<div class="our_role_section">
<p id="role_text">CK</p>
</div>
</div>
<!-- Our Functions Section -->
<!-- Our Functions Section -->
<div class="title_wrapper_box">
<div class="role_box">
<h1 class="our_role_title">Our Funtions</h1>
</div>
</div>
<div class="functions_category_wrapper">
<a class="functionBtn">
<div class="functions_category_boxes" id="scBtn">
<img class="functions_category_icons" id="supply_chain_icon" src="/Icons/Supply_Chain_icon.png">
<h2 class="functions_category_title">Supply Chain</h2>
</div>
</a>
<a class="functionBtn">
<div class="functions_category_boxes" id="rdBtn">
<img class="functions_category_icons" src="/Icons/R%26D_Icon.png">
<h2 class="functions_category_title">Research & Development</h2>
</div>
</a>
<a class="functionBtn">
<div class="functions_category_boxes" id="comBtn">
<img class="functions_category_icons" src="/Icons/commercial_icon.png">
<h2 class="functions_category_title" id="fuctions_commercial_text">Commmercial</h2>
</div>
</a>
</div>
<div class="our_functions_wrapper">
<div class="our_role_section">
<div class="our_role_content" id="our_role_sc_content">
<h2>Supply Chain content will go here</h2>
</div>
<div class="our_role_content" id="our_role_rd_content">
<h2>Research and Development content will go here</h2>
</div>
<div class="our_role_content" id="our_role_com_content">
<h2>Commercial content will go here</h2>
</div>
</div>
</div>
</div>
<!-- Column Right Has: Docs and Contact/Our Team -->
<div class="column_right" id="column_right_ck">
<div class="our_docs_wrapper">
<h1 class="our_docs_title">Our Docs</h1>
<div class="our_docs_section">
<img class="folder_icons" src="/Icons/folder_icon.png">
</div>
</div>
<div class="our_agenda_wrapper">
<h1 class="our_agenda_title">Agenda</h1>
<div class="our_agenda_section">
<img class="folder_icons" src="/Images/SBP_Tool/Icons/folder_icon.png">
</div>
</div>
</div>
</div>
<!-- *********************************** -->
<!-- ************ Quick Links *********** -->
<!-- *********************************** -->
<div id="pharma_QL_canvas">
<!-- Column Left Has: Greeting, Role, Functions Sections-->
<div class="column_left">
<!-- Greeting Section -->
<div id="greeting_section">
<h1 id="greeting_section_title">Welcome to the Pharmaceuticals Dashboard</h1>
<p id="geeting_section_subTitle">QUICK LINKS </p>
</div>
<!-- Our Role Section -->
<div class="title_wrapper_box">
<div class="role_box">
<h1 class="our_role_title">Our Role</h1>
</div>
<div class="carousel_arrow_box"><h1 class="arrows"> < </h1> <h1 class="arrows"> > </h1></h1>
</div>
</div>
<div class="our_role_wrapper">
<div class="our_role_section">
<p id="role_text">CK</p>
</div>
</div>
<!-- Our Functions Section -->
<div class="title_wrapper_box">
<div class="role_box">
<h1 class="our_role_title">Our Funtions</h1>
</div>
</div>
<div class="functions_category_wrapper">
<div class="functions_category_boxes">
<img class="functions_category_icons" id="supply_chain_icon" src="/SBP_Tool/Icons/Supply_Chain_icon.png">
<h2 class="functions_category_title">Supply Chain</h2>
</div>
<div class="functions_category_boxes">
<img class="functions_category_icons" src="/SBP_Tool/Icons/R%26D_Icon.png">
<h2 class="functions_category_title">Research & Development</h2>
</div>
<div class="functions_category_boxes">
<img class="functions_category_icons" src="/SBP_Tool/Icons/commercial_icon.png">
<h2 class="functions_category_title" id="fuctions_commercial_text">Commmercial</h2>
</div>
</div>
<div class="our_functions_wrapper">
<div class="our_role_section">
<p id="role_text">Text kdvkfnvjnvkjfnvkjfnv</p>
</div>
</div>
</div>
<!-- Column Right Has: Docs and Contact/Our Team -->
<div id="column_right">
<div class="our_docs_wrapper">
<h1 class="our_docs_title">Our Docs</h1>
<div class="our_docs_section">
<img class="folder_icons" src="/Images/SBP_Tool/Icons/folder_icon.png">
</div>
</div>
<div class="our_agenda_wrapper">
<h1 class="our_agenda_title">Agenda</h1>
<div class="our_agenda_section">
<img class="folder_icons" src="/SRC/Images/SBP_Tool/Icons/folder_icon.png">
</div>
</div>
</div>
</div>
<!-- Canvas End -->
</div>
<!-- Main Container End -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
我有几个建议给你：
- 在 JavaScript 中，您应该坚持使用驼峰式大小写。所以
CK_canvas会ckCanvas - 你看到它“循环”的原因是你的动画周期太长了，你可以排队多个调用来执行动画。总的来说，UI 中的动画应该是快速而活泼的。最多考虑 0.1 到 0.5 秒。
- 使用辅助函数。例如，您可以使用以下方法来启用或禁用颜色的某些类 - 这将有助于减少代码重复，应尽可能避免：
function toggleShadowColor(color) {
$('.our_functions_wrapper').removeClass('our_functions_shadow_orange');
$('.our_functions_wrapper').removeClass('our_functions_shadow_blue');
$('.our_functions_wrapper').removeClass('our_functions_shadow_red');
switch (color) {
case "orange":
$('.our_functions_wrapper').addClass('our_functions_shadow_orange');
break;
case "blue":
$('.our_functions_wrapper').addClass('our_functions_shadow_blue');
break;
case "red"
$('.our_functions_wrapper').addClass('our_functions_shadow_red');
}
}
//Call it like this:
toggleShadowColor("red");
如果您想在动画期间阻止和启用用户操作，您还可以使用以下内容来监听动画的结束。IE 禁用菜单/导航或检查是否隐藏或显示某些内容：
const animated = document.querySelector('.animated');
animated.addEventListener('animationend', () => {
console.log('Animation ended');
});