switching opacity of a div onclick

Question

I want to have 2 animation when clicking on a text link :

• display a div when clicking, and hide it when clicking again (it works perfectly)
• change opacity of another div to 0.5, and change back opacity when clicking again (back to opacity =1).

the opacity works when clicking, but at the second click I can't make it go back to opacity=1.

I tried with :

.fadeTo, .fadeToggle, but I can't make it work...

so when clicking on "#edition2014", ".menu_edition_2014" displays and "#menu" fades to 0.5 with a fade out animation, and when clicking again on "#edition2014", ".menu_edition_2014" hides and "#menu" fades to 1, with a fade in animation.

here is my Jquery :

$(document).ready(function() {
    $('#edition2014').click(function() {
            $('.menu_edition_2014').slideToggle("slow");
        $( '#menu' ).fadeTo( "fast", 0.5);
    });
});

here is a jsfiddle : http://jsfiddle.net/APA2S/1500/

thanks a lot for your help,

Answer 1

You can do something like this

$( '#menu' ).fadeTo( "fast", $('#menu').css("opacity") == "1" ? "0.5" : "1");

Answer 2

The issue is you're toggling a slide, but switching the fade one way with a single event.

Why not use a CSS solution, and toggle a class? The added benefit is the separation of style and content so if you wish to change the effect at a later date, its easy to edit your CSS.

Demo Fiddle

jQuery:

$(document).ready(function() {
     $('#edition2014').click(function() {
            $('.menu_edition_2014').slideToggle("slow");
            $( '#menu' ).toggleClass('fade');
     });
});

CSS

#menu{
    opacity:1;
    transition:opacity 0.5s ease-in;
}
#menu.fade{
    opacity:0.5;
}

Answer 3

Try this:

$('#edition2014').click(function() {
    var el = $('#menu');
    $('.menu_edition_2014').slideToggle("slow");
    if (el.css('opacity') == 1) {
        el.fadeTo("fast", .5);
    } else {
        el.fadeTo("fast", 1);
    }
});

JS Fiddle