Jquery fadeToggle Trouble

Question

I'm building a web app and am trying to incorporate animations to make it a little more pleasing to use. I'm new to the industry so I'm sure there is a better way of doing this so sorry in advance for the bad code!

I have two menus: One is for 'Sector', the other is for 'Menus'. Upon selecting a sector a few menu items will populate for that given sector. AND THEN once the Menu item has been selected the blank section on the right will populate with the actual content. (It's kind of like a dashboard?)

In any case, As you can see in the code I'm constantly toggling through which items to show and which items are to hide. (If there is a short cut way to do this please let me know!)

The problem I am running into is when I add a fadeToggle() I find that it works initially, however eventually the app glitches and will loop.

I have written in the code that IF the pharma canvas is display == none then show the welcome message again, but it's not working..

I want to have a high fade ideally so I can incorporate animations on the welcome menu (the big orange div that appears before clicking anything)

Is there a better way of ensuring that once the fade happens it stops if the user selects a different menu option?

For example: If I click Pharma, then click it again (to hide it) i want to absolutely make sure that it will 100% be hidden and not start fading again.

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












    


  
      
   











   



    
        Sector
        Select Sector
    
        
            
            DONT CLICK
        
        
            
            NOT IMPORTANT
        
        
            
            Blah
        

        
            
            Blah2
        
        
            
            Pharma
        
    
    
    
        
            Menus
            Select Menu
            
            
                Please Select Sector to Display Menus
            
        
        
    
    
    
        
            Menus
            Select Menu
            
                
                    Overview
                
            
            
                
                    CK
                
            
            
                
                    Quick Links
                
            
            
                
                    Training Materials
                
            
            
                
                    Team Members
                
            
        
        
    
    
    
    
        
    
            
                
                
                    
                     
                        Welcome Platform
                        Begin your journey by selecting a sector
                    

                
        
        
        
    
    
    
    
    
    
        
            
                
                
                    
                     
                        Welcome to the Pharmaceuticals Dashboard
                        Here you will find an overview of our process 
                    
                        
                    
                    
                        
                            Pharmaceuticals
                        
                         < 
  > 
                        
                    
                    
                            
                                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.
                            
                    
                        
                

                
                
                    
                        Our Docs
                            
                                
                            
                    
                    
                    
                        Agenda
                            
                                
                            
                    
                        
                
            
            
    
    
    
            
                
                
                    
                     
                        Welcome to the Pharmaceuticals Dashboard
                        Customer Knowledge
                    
                        
                    
                    
                        
                            Our Role
                        
                         < 
  > 
                        
                    
                    
                            
                                CK
                            
                    
                            
    
                    
                        
                            Our Funtions
                        
                    
                    
                        
                            
                            
                                     
                                    Supply Chain
                                
                            
                        
                        
                            
                        
                                     
                                    Research & Development
                                
                            
                        
                        
                            
                                
                                     
                                    Commmercial
                                
                            
                        
                    
                    
                    
                            
                                
                                
                                    Supply Chain content will go here
                                
                                
                                    Research and Development content will go here
                                
                                
                                    Commercial content will go here
                                
                            
                    
                

                
                
                    
                        Our Docs
                            
                                
                            
                    
                    
                    
                        Agenda
                            
                                
                            
                    
                        
                
            
            
            
            
    
    
    
            
                
                
                    
                     
                        Welcome to the Pharmaceuticals Dashboard
                        QUICK LINKS 
                    
                        
                    
                    
                        
                            Our Role
                        
                         < 
  > 
                        
                    
                    
                            
                                CK
                            
                    
                            
                    
                        
                            Our Funtions
                        
                    
                    
                        
                             
                            Supply Chain
                        
                        
                             
                            Research & Development
                        
                        
                             
                            Commmercial
                        
                    
                    
                            
                                Text kdvkfnvjnvkjfnvkjfnv
                            
                    
                

                
                
                    
                        Our Docs
                            
                                
                            
                    
                    
                    
                        Agenda

Jeff B · Accepted Answer

I have a few suggestions for you:

In JavaScript you should stick with camel case. So CK_canvas would be ckCanvas
The reason you are seeing it "loop" is because your animation cycle is so long that you can queue up multiple calls to perform the animation. Also in general animations in a UI should be fast and snappy. Think .1 to .5 seconds max.
Make use of helper functions. For instance, you could use the following to enable or disable certain classes for the colors - this will help reduce in code duplication, which should be avoided when 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");

You can also use the following to listen for end of animations if you want to prevent and enable user actions during an animation. IE disable the menu/nav or check if something is hidden or shown:

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

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

Jquery fadeToggle Trouble

Answers (1)

Related Questions