JQuery fade out

By : xan
Source: Stackoverflow.com
Question!

I've have a page with several (about 30) same-sized divs. But the class is different for them 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;
} 

Next, I've a navi class such as:

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

My aim is that if a user clicks on Events[ie, div #t1], all boxes will fade out except those having the class .events. Similarily, for the other options as well. I'm using Jquery for this. But my code is too long.Is there any way of shortening 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>

Similarily, for #t2, #t3, #t4, etc. Is there any way of shortening the code?

EDIT#1

I mean do I have 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 to remove .active class when the user clicks on some other option?

By : xan


Answers

Firstly I would create some better identifiers on your main menu, so that it's easier to identify which section you want to load:



Try using the jQuery fadeOut and fadeIn functions, and to find the elements that do not have the events class, use a CSS not selector not(.events)

By : ColinE


This video can help you solving your question :)
By: admin