Fading Out with JQuery

Question

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as:

.mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures {
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
}

There is also a navi class:

<div id="navi">
    <a href="#"><div id="t0" class="n0 lfloat"><img src="images/home.png"><span>Home</span></div></a>
    <a href="#"><div id="t1" class="n1 lfloat"><img src="images/events.png"><span>Events</span></div></a>
    <a href="#"><div id="t2" class="n2 lfloat"><img src="images/workshops.png"><span>Workshops</span></div></a>
    <a href="#"><div id="t3" class="n3 lfloat"><img src="images/lectures.png"><span>Lectures</span></div></a>
    <a href="#"><div id="t4" class="n4 lfloat"><img src="images/exhibitions.png"><span>Exhibitions</span></div></a>
    <a href="#"><div id="t5" class="n5 lfloat"><img src="images/hospitality.png"><span>Hospitality</span></div></a>
    <a href="#"><div id="t6" class="n6 lfloat"><img src="images/gallery.png"><span>Gallery</span></div></a>
    <a href="#"><div id="t7" class="n7 lfloat"><img src="images/sponsors.png"><span>Sponsors</span></div></a>
</div>

When a user clicks on "Events" [div #t1], all boxes except those with the class .events should fade out. This functionality is implemented using JQuery. However, the code seems too lengthy. Is there a way to shorten it?

    <script type="text/javascript">
    $(function () {
    $('a #t0').click(function() {
        $("*").animate({ 
            opacity: 1.0
            }, 500 );

        });

    $('a #t1').click(function() {
        $("#t1").toggleClass("active");
        $(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate({ 
            opacity: 0.0
            }, 500 );
        $(".events").animate({ 
            opacity: 1.0
            }, 500 );

        });
</script>

The code for #t2, #t3, #t4 can be similar. How can I make this more concise?

EDIT#1

Do I need to write .click(function() 7 times for each #t individually and exclude that class when writing $(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate()? Also, how can I remove the active class when the user selects another option?

javascript jquery html css fade

Answer 1

Answer №1

Here is a suggestion for you to try out: Live Demo

To make this work, ensure that all boxes have a common class, in this case, I chose to use boxes.

This code snippet also manages the "Home" option by displaying all the divs and setting the clicked div class to active.

<script type="text/javascript">
    $(function () {
        $('a #t0').click(function() {
            $(".boxes").animate({ 
                opacity: 1.0
                }, 500 );

        });


        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();

            if(c != "home") {
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 );
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );

                $(".active").removeClass('active');
                d = $(this).find('div')[0];
                $(d).addClass('active');
            }
        });
    });
</script>

Answer 2

Here is a suggestion for you to try out: Live Demo

To make this work, ensure that all boxes have a common class, in this case, I chose to use boxes.

This code snippet also manages the "Home" option by displaying all the divs and setting the clicked div class to active.

<script type="text/javascript">
    $(function () {
        $('a #t0').click(function() {
            $(".boxes").animate({ 
                opacity: 1.0
                }, 500 );

        });


        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();

            if(c != "home") {
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 );
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );

                $(".active").removeClass('active');
                d = $(this).find('div')[0];
                $(d).addClass('active');
            }
        });
    });
</script>

Answer 3

Answer №2

To achieve the desired effect, consider employing jQuery's fadeOut and fadeIn functions. To target elements without the events class, utilize the CSS not selector as follows: not(.events)

Answer 4

To achieve the desired effect, consider employing jQuery's fadeOut and fadeIn functions. To target elements without the events class, utilize the CSS not selector as follows: not(.events)

Answer 5

Answer №3

To start, it would be helpful to improve the identifiers in your main menu for easier navigation:

<a href="#" id="home">....</a>
<a href="#" id="events">....</a>
<!-- etc -->

Without a clear picture of how the content divisions are structured, let's assume they follow this format (using the content class to manage non-selected content):

<div class="home content">...</div>
<div class="events content">...</div>
<!-- etc -->

To simplify your JavaScript code, consider using fadeIn() and fadeOut() for transitions, addClass() and removeClass() for class manipulation, and consolidate event handling with a single click event listener for all links.

$('#navi a').click(function() {

    // only execute if clicked anchor is not active
    if (! $(this).hasClass('active')) 
    {
        // managing active class state
        $('#navi a').removeClass('active'); // remove class from all anchors
        $(this).addClass('active');         // add class to selected anchor

        // fading out / in required content
        var showContentByClass = '.' + $(this).attr('id');
        $('.content').not(showContentByClass).fadeOut('slow');
        $(showContentByClass).fadeIn('slow');
    }
});

This updated script includes a check to ensure the chosen option is different from the currently displayed content.

Answer 6

To start, it would be helpful to improve the identifiers in your main menu for easier navigation:

<a href="#" id="home">....</a>
<a href="#" id="events">....</a>
<!-- etc -->

Without a clear picture of how the content divisions are structured, let's assume they follow this format (using the content class to manage non-selected content):

<div class="home content">...</div>
<div class="events content">...</div>
<!-- etc -->

To simplify your JavaScript code, consider using fadeIn() and fadeOut() for transitions, addClass() and removeClass() for class manipulation, and consolidate event handling with a single click event listener for all links.

$('#navi a').click(function() {

    // only execute if clicked anchor is not active
    if (! $(this).hasClass('active')) 
    {
        // managing active class state
        $('#navi a').removeClass('active'); // remove class from all anchors
        $(this).addClass('active');         // add class to selected anchor

        // fading out / in required content
        var showContentByClass = '.' + $(this).attr('id');
        $('.content').not(showContentByClass).fadeOut('slow');
        $(showContentByClass).fadeIn('slow');
    }
});

This updated script includes a check to ensure the chosen option is different from the currently displayed content.

Fading Out with JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Transitioning the implicit width

What is the best way to sort a combination of numbers and text strings?

What is the best way to display HTML in this particular situation?

Select either one checkbox out of two available options

At what point does the cleanup function in UseEffect activate the clearInterval() function?

What is the reason behind the immediate firing of the animate callback function when a CSS transition is present?

The Vue JS task manager is unable to remove completed tasks from the list

Verifying unloaded images

Exploring depths of data with AngularJS: multiple levels of drilling

Redux - The same reducers, containers, and components are yielding varying outcomes

Transfer an Array of Objects containing images to a POST API using Angular

Deactivating all HTML DOM elements except for those with a specific #id

Retrieving JSON data with jQuery's Ajax functionality

Error encountered when generating bower.json due to absence of version number

Guide to create a sliding menu transition from the viewport to the header

Incorporating docsify CSS styling into Markdown within the VScode environment

Enhancing ajax content with Rx.Observable.fromEvent: A step-by-step guide

Is there a way to divide a single array into two separate arrays based on a specific element?

What is the best way to execute the .playVideo() function in Youtube using jQuery?

What is the best way to utilize a color picker to apply CSS color to a parent element?