JQuery fade out

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?

Have you tried jQuery `fadeOut()`: http://api.jquery.com/fadeOut/ — diggersworld, Jan 05 '13 at 07:42

ATOzTOA · Accepted Answer · 2013-01-05T11:18:22.257

4

Give this a try: Live Demo

You have to specify a common class for all the boxes, I have used boxes.

It also handles "Home", which will show all the divs. Sets 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>

edited Jan 05 '13 at 11:18

answered Jan 05 '13 at 07:47

ATOzTOA

34,814
22
96
117

I'd already started with this one only. The thing is it is first executing `fadeIn` and **then** `fadeOut` which creates a time lapse. My code was doing things simultaneously. – xan Jan 05 '13 at 08:04
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22227/discussion-between-xan-and-atoztoa) – xan Jan 05 '13 at 08:08
It works fine now, still clicking `Home` **fades in** all as expected but then **fades out** all. – xan Jan 05 '13 at 08:13
I removed `#t0` from `navi a` parent-->works fine now. Also, how to assign an `active` class to the selected `navi a` element that is removed when another `navi a` element is clicked. – xan Jan 05 '13 at 08:19
@xan: My answer already shows the adding and removal of classes. Take a look. – diggersworld Jan 05 '13 at 08:20
For the Home issue, just do a check like `c != "home"` – ATOzTOA Jan 05 '13 at 08:24
I wanted to apply `.active` to `
` such that it becomes `
`
– xan Jan 05 '13 at 09:01

diggersworld · Answer 2 · 2013-01-05T08:35:31.137

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

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

I can't actually tell from your question what the content divisions look like. So let's assume they look like this (I will use the content class to fade out non-selected content):

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

To shorten your JS you can use fadeIn() and fadeOut() for the fades, addClass() and removeClass() for class management, and you only need one click event listener as you can assign it to all the links.

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

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

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

In the example above I've also added a check which makes sure the selected option is not the currently shown content.

score 0 · Answer 3 · answered Jan 05 '13 at 07:45

0

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)

answered Jan 05 '13 at 07:45

ColinE

68,894
15
164
232

JQuery fade out

3 Answers3