The dividers flicker in and out of view

I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 elements in my menu, but am encountering 2 issues: 1) Element A isn't fading in properly. 2) There's a timing issue with fading in and out, resulting in potential content collisions. Any suggestions?

HTML:

<div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1" onclick="checklist(this)"><button>A</button></li>
            <li id="item2"><button>B</button></li>
            <li id="item3"><button>C</button></li>
            <li id="item4"><button>D</button></li>
            <li id="item5"><button>E</button></li>
            <li id="item6"><button>F</button></li>
            <li id="item7"><button>G</button></li>
        </ul>
        </div>


        <div id="first">
            <img id="image1" src="http://placehold.it/350x150"/>
            <img id="image2" src="http://placehold.it/350x150"/>
            <img id="image3" src="http://placehold.it/350x150"/>
            <img id="image4" src="http://placehold.it/350x150"/>
            <img id="image5" src="http://placehold.it/350x150"/>
            <img id="image6" src="http://placehold.it/350x150"/>
            <img id="image7" src="http://placehold.it/350x150"/>
            <img id="image8" src="http://placehold.it/350x150"/>
            <img id="image9" src="http://placehold.it/350x150"/>
            <img id="image10" src="http://placehold.it/350x150"/>
        </div>


        <div id="second">
            <img id="image1" src="http://placehold.it/350x150"/>
            <img id="image2" src="http://placehold.it/350x150"/>
            <img id="image3" src="http://placehold.it/350x150"/>
            <img id="image4" src="http://placehold.it/350x150"/>
            <img id="image5" src="http://placehold.it/350x150"/>
            <img id="image6" src="http://placehold.it/350x150"/>
            <img id="image7" src="http://placehold.it/350x150"/>
            <img id="image8" src="http://placehold.it/350x150"/>
            <img id="image9" src="http://placehold.it/350x150"/>
            <img id="image10"src="http://placehold.it/350x150"/>
        </div>

        <div id="third">
            <img id="image1" src="http://placehold.it/350x150"/>
            <img id="image2" src="http://placehold.it/350x150"/>
            <img id="image3" src="http://placehold.it/350x150"/>
            <img id="image4" src="http://placehold.it/350x150"/>
            <img id="image5" src="http://placehold.it/350x150"/>
            <img id="image6" src="http://placehold.it/350x150"/>
            <img id="image7" src="http://placehold.it/350x150"/>
            <img id="image8" src="http://placehold.it/350x150"/>
            <img id="image9" src="http://placehold.it/350x150"/>
            <img id="image10"src="http://placehold.it/350x150"/>
        </div>

CSS:

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

#second
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#second img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

#third
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#third img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

 li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 180px;
    text-align:right;    
    border-style: none;

}

.menu{

    width:150px;
    height: 350px;

   }

.menu li{  
    position: relative;
    top:150px; 
    bottom: 0;
    left: 695px;
    right:0;
    margin: auto; 
    border-style:none;

}

JQUERY:

$(document).on('click','#item1', function()
{ 
    $("#second, #third").fadeOut(2000, function(){
        $("#first").fadeIn(6000);
    });
});

$(document).on('click','#item2', function()
{ 
    $("#first, #third").fadeOut(2000, function(){
        $("#second").fadeIn(6000);
    });
});

$(document).on('click','#item3', function()
{ 
    $("#first, #second").fadeOut(2000, function(){
        $("#third").fadeIn(6000);
    });
});

JSFIDDLE: http://jsfiddle.net/ktyxr77y/

Answer №1

Here is an alternative approach that may offer better scalability: JS Fiddle link

For a smooth fadeIn/fadeOut crossfade effect, consider applying an absolute position to the wrappers (adjustments may be needed for positioning).

Additional CSS:

#first, #second, #third { position: absolute;}

Jquery code:

$('li').on('click', function() {
    //extract last character of the li's id
    var lastChar = $(this).attr('id').slice(-1);
    //determine which section to display based on the last character

    if (lastChar == 1) {
        section = $('#first');
    }
    if (lastChar == 2) {
        section = $('#second');
    }

    if (lastChar == 3) {
        section = $('#third');
    }

    $('#first, #second, #third').not(section).fadeOut(1000, function() {
        $(section).fadeIn(1000);
    });
});

Note: The transition speed has been increased for demonstration purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate repetitive elements from an array using a specific merging algorithm

Here's a thought I have: If we have an array of objects like this: [ { "name": "Kirk", "count": 1 }, { "name": "Spock", "count": 1 }, { "name": "Kirk", "count": 1 } ] I would l ...

When utilizing a Service through UserManager, the User variable may become null

Utilizing Angular 7 along with the OIDC-Client library, I have constructed an AuthService that provides access to several UserManager methods. Interestingly, when I trigger the signInRedirectCallback function from the AuthService, the user object appears ...

I've encountered a peculiar error that is new to me while using bootstrap and javascript. Can anyone shed light on what this error signifies?

Hey there! I've come across this error in the console while attempting to utilize Bootstrap. It seems that a style is being refused from 'http://127.0.0.1:5500/node_modules/font-awesome/css/font-awesome.min.css' due to its MIME type ('t ...

Having trouble with Mongoose's findOne method not functioning as expected

I am developing an application where users can input data such as the number of hours they slept and their eating habits. This information is then stored in a collection known as the Journal. When a user clicks on "stats", it activates a function called f ...

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

Discover the location following a designated distance along a direct path connecting two points in the Google Maps API

Using the Google Maps API, I have plotted a straight line from point P1 to point P2. Both points have latitude and longitude coordinates available. I am interested in finding a point (P) along this straight line, located at a specific distance from P1. F ...

Passing array map data to another screen in React Native

Greetings! I successfully created an array map to showcase specific data from my API. Now, I am faced with the challenge of TRANSFERRING THIS DATA TO ANOTHER SCREEN. My current dilemma lies in the fact that the displayed data is generated using ARRAY MAP, ...

Tips for retrieving the value from a live input element of Value

Hello, I have an Input hidden element and I need to set its value using JQuery after making an AJAX call. Here is my code: After the AJAX call, I am trying to fetch the value of this input field in my code. However, when I try to retrieve it using var FO ...

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Is there a way to fetch the current URL in Next.js without relying on window.location.href or React Router? const parse = require("url-parse"); parse("hostname", {}); console.log(parse.href); ...

Your search parameter is not formatted correctly

I am currently working on filtering a collection based on different fields such as name by extracting the values from the URL parameters. For example: http://localhost:3000/patient?filter=name:jack I have implemented a method to retrieve and convert these ...

Issue with Gulp and Browserify task: Why is there no output?

I've set up the following task in my gulpfile.js gulp.task('default', ['browserify']) gulp.task('browserify', function () { return browserify('./public/js/x.js') .bundle() .pipe(source('y.js& ...

Using React JS to extract query string values

My current URL contains the following: http://example.com/callback?code=abcd I am trying to extract the value of "code." Here is the React code I have written: import React from 'react'; import { useEffect } from 'react'; const Callba ...

Turn off the functionality of Telerik in DotNetNuke

After installing the DNN module on a remote machine, I noticed that it altered the CSS styling. Upon inspecting it with Firebug, I discovered that the styles causing issues are located in telerik.web.ui.webresource.axd, making it difficult to overwrite the ...

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page. https://i.sstatic.net/aR0Qm.jpg https://i.sstatic.net/e61Ig.jpg I ha ...

What is the best way to select the enclosed <a> tag within an <li> element?

Below is the JavaScript code I have attempted: $('#footer').find('.browse li').click(function(e){ $(this).find('a').click(); }); Here is the relevant HTML: <div id="footer" class="span-24"><div ...

Apollo's MockedProvider failing to provide the correct data as expected

I created a function called useDecider that utilizes apollo's useQuery method. Here is the code: useDecider: import { useState } from 'react'; import { useQuery, gql } from '@apollo/client'; export const GET_DECIDER = gql` quer ...

Using JavaScript to Apply CSS Styles in JSF?

Is it possible to dynamically apply a CSS style to a JSF component or div using Javascript? I have been searching without any success. Below is some pseudo code: <div style="myJSStyleFunction("#{myBean.value}")"> stuff </div> The function wo ...

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

execute numerous queries simultaneously

I have a task of creating a bridge (script) that connects two databases, Mongo and Oracle. First, I execute three find queries on my MONGO database from three different collections: Collection 1 = [{ name: 'Toto', from: 'Momo', ...

Ways to elevate a tone on an HTML webpage

When I start my Python server from the command prompt, any print statements that are reached will be displayed. How can I make sure these messages show up on the template login.html? Views.py def home(request): templatename="login.html" ...