You can do something like this
$( '#menu' ).fadeTo( "fast", $('#menu').css("opacity") == "1" ? "0.5" : "1");
Вопрос
I want to have 2 animation when clicking on a text link :
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,
Решение 2
You can do something like this
$( '#menu' ).fadeTo( "fast", $('#menu').css("opacity") == "1" ? "0.5" : "1");
Другие советы
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.
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;
}
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);
}
});