jquery - 切换 div onclick 的不透明度

Question

我想在点击文本链接时有 2 个动画:

• 点击时显示一个div，再次点击时隐藏它(完美运行)
• 将另一个 div 的不透明度更改为 0.5，并在再次单击时更改回不透明度(回到不透明度 =1)。

不透明度在点击时有效，但在第二次点击时我无法让它回到不透明度=1。

我试过:

.fadeTo、.fadeToggle，但我无法让它工作...

因此，当单击“#edition2014”时，“.menu_edition_2014”会显示，“#menu”会淡出到 0.5 并带有淡出动画，而当再次单击“#edition2014”时，“.menu_edition_2014”会隐藏，而“#menu” "淡入 1，动画淡入淡出。

这是我的 Jquery:

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

这是一个 jsfiddle:http://jsfiddle.net/APA2S/1500/

非常感谢您的帮助，

Answer 1

问题是您正在切换幻灯片，但通过单个事件以一种方式切换淡入淡出。

为什么不使用 CSS 解决方案并切换类？额外的好处是样式和内容的分离，因此如果您希望以后更改效果，可以轻松编辑您的 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;
}