Question

点击文字链接时，我希望有2个动画：

点击时显示div，再次点击时隐藏它（效果很好）
将另一个div的不透明度更改为0.5，再次单击时返回不透明度（返回opacity = 1）。

单击时不透明度有效，但在第二次单击时我无法返回到opacity = 1.

我尝试过：

.fadeTo，.fadeToggle，但我无法让它发挥作用......

所以当点击＆＃34;＃edition2014＆＃34;，＆＃34; .menu_edition_2014＆＃34;显示和＆＃34;＃menu＆＃34;使用淡出动画淡化为0.5，再次点击＆＃34;＃edition2014＆＃34;，＆＃34; .menu_edition_2014＆＃34;隐藏和＆＃34;＃menu＆＃34;渐弱到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;
}

Answer 2

你可以做这样的事情

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

Answer 3

试试这个：

$('#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

Answer 4

如果您不想使用CSS类。

    $(document).ready(function() {
    $('#edition2014').click(function() {
        $('.menu_edition_2014').slideToggle("slow");
        if($('#menu').css('opacity') == 1){
            $('#menu').animate({opacity:0.5}, 1000);
        } else{
            $('#menu').animate({opacity:1}, 1000);
        }
     });
});

切换div的不透明度

4 个答案:

Demo Fiddle