Jquery fadeToggle Trouble

Question

Je suis en train de créer une application Web et j'essaie d'y intégrer des animations pour la rendre un peu plus agréable à utiliser. Je suis nouveau dans le secteur et je suis sûr qu'il existe une meilleure façon de procéder, alors je m'excuse d'avance pour le mauvais code !

J'ai deux menus : L'un concerne le "Secteur", l'autre les "Menus". Lorsque je sélectionne un secteur, quelques éléments de menu s'affichent pour ce secteur. Ensuite, une fois que l'élément de menu a été sélectionné, la section vide sur la droite s'affiche avec le contenu réel. (C'est un peu comme un tableau de bord ?)

En tout cas, comme vous pouvez le voir dans le code, je suis constamment en train de basculer entre les éléments à afficher et ceux à cacher. (S'il y a un moyen plus court de faire cela, merci de me le faire savoir).

Le problème que je rencontre est le suivant : lorsque j'ajoute un fadeToggle(), je constate que cela fonctionne initialement, mais que l'application finit par se bloquer et tourner en boucle.

J'ai écrit dans le code que si le canevas de la pharmacie est display == none, le message de bienvenue sera affiché de nouveau, mais cela ne fonctionne pas. ..

Je veux avoir un fondu élevé, idéalement pour pouvoir incorporer des animations dans le menu de bienvenue (la grande div orange qui apparaît avant de cliquer sur quoi que ce soit).

Existe-t-il un meilleur moyen de garantir qu'une fois le fondu effectué, il s'arrête si l'utilisateur sélectionne une autre option de menu ?

Par exemple : Si je clique sur Pharma, puis clique à nouveau (pour le masquer), je veux être absolument certain qu'il sera masqué à 100 % et qu'il ne recommencera pas à s'effacer.

$( 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>

Answer 1

J'ai quelques suggestions à vous faire :

1. En JavaScript, vous devez vous en tenir à la casse. Donc CK_canvas serait ckCanvas
2. La raison pour laquelle vous la voyez "tourner en boucle" est que votre cycle d'animation est si long que vous pouvez mettre en file d'attente plusieurs appels pour exécuter l'animation. De plus, en général, les animations d'une interface utilisateur doivent être rapides et vives. Pensez à 0,1 à 0,5 seconde maximum.

3. Utilisez les fonctions d'aide. Par exemple, vous pouvez utiliser la fonction suivante pour activer ou désactiver certaines classes pour les couleurs - cela permettra de réduire la duplication du code, qui doit être évitée autant que possible :

   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");

Vous pouvez également utiliser ce qui suit pour écouter la fin des animations si vous voulez empêcher et permettre les actions de l'utilisateur pendant une animation. Par exemple, désactiver le menu/nav ou vérifier si quelque chose est caché ou affiché :

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});