切换div onclick的不透明度

Posted 2023-05-08

【中文标题】切换div onclick的不透明度

【英文标题】：switching opacity of a div onclick

【发布时间】：2014-06-06 16:46:54

【问题描述】：

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

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

点击时不透明度有效，但在第二次点击时我无法让它回到 opacity=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/

非常感谢您的帮助，

【参考方案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;

【参考方案2】：

你可以这样做

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

【参考方案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