I have a very basic page of dashboards, controlled by a dropdown control. The idea being that visitors can select an appropriate dashboard from the dropdown and the corresponding div appears below it. There could be an arbitrary number of dashboards (currently, I have 5; I expect to grow this to 9 or possibly more)

<div >
    <label for="view-select" style="margin: 2px; font-size:15px; font-family: Bahnschrift; font-weight: bolder; color: #2F75B5;">Dashboard View :</label>
    <select name="views" id="view-select" style="margin: 10px; font-size:15px; font-family: Bahnschrift; font-weight: bolder; background-color: #2F75B5; color: white; height: 30px;">
        <option selected value="1">Dashboard #1</option>
        <option value="2">Dashboard #2</option>
        <option value="3">Dashboard #3</option>
        <option value="4">Dashboard #4</option>
        <option value="5">Dashboard #5</option>
    </select>
</div>

<div  id="dashboard1"></div>
<div  id="dashboard2"></div>
<div  id="dashboard3"></div>
<div  id="dashboard4"></div>
<div  id="dashboard5"></div>

The dashboards are actually separate HTML files, loaded as part of $(document).ready. To switch between the dashboards, I just detect the change in the dropdown and switch the display from 'block' to 'none' or vice versa as appropriate.

<script type="text/javascript">

$(document).ready(function() {
    
    $(function(){
        $("#dashboard1").load("../Dashboard1.htm"); 
    });
    
    $(function(){
        $("#dashboard2").load("../Dashboard2.htm"); 
    });
    
    $(function(){
        $("#dashboard3").load("../Dashboard3.htm"); 
    });

    $(function(){
        $("#dashboard4").load("../Dashboard4.htm"); 
    });

    $(function(){
        $("#dashboard5").load("../Dashboard5.htm"); 
    });

    $('#view-select').on('change', function () {
        $("#dashboard1").css('display', (this.value == '1') ? 'block' : 'none');
        $("#dashboard2").css('display', (this.value == '2') ? 'block' : 'none');
        $("#dashboard3").css('display', (this.value == '3') ? 'block' : 'none');
        $("#dashboard4").css('display', (this.value == '4') ? 'block' : 'none');
        $("#dashboard5").css('display', (this.value == '5') ? 'block' : 'none');
    });

    $("#dashboard1").css('display', 'block');
    $("#dashboard2").css('display', 'none');
    $("#dashboard3").css('display', 'none');
    $("#dashboard4").css('display', 'none');
    $("#dashboard5").css('display', 'none');
}
);

This works fine but I want to "snazz" it up a bit by having some form of animated transition between the div's when the user changes the value in the dropdown. Nothing too dramatic or complex, even if was a simple fade-out / fade-in or maybe a slide-out / slide-in - to be honest, I don't know the possibilities available. I just want something that looks slightly more sophisticated than a sudden switch between the div's.

I've tried researching css transitions and animations but I can't figure out how to implement them (I half suspect using the css display class is what's holding me back but I don't know any other method of switching the visibility of a div)

Thanks in advance for any tips, suggestions or pointers!

CodePudding user response：

Try to add dashboard class to dashboard div elements than you van apply this js code

$('#view-select').on('change', function () {
    var daheboards = document.getElementsByClassName("dashboard");
    for (let index = 0; index < daheboards.length; index  ) {
        daheboards[index].style.display = "none";
    }
    $("#dashboard"   this.value).fadeIn();
});
$("#dashboard1").fadeIn();

You can also set the action time to fadeIn() function in ms to control fade in time fadeIn(1000) or fadeIn('slow') jQuery fadeIn() doc