div的切换不透明度
div的切换不透明度
提问于 2014-04-22 10:51:50
我希望在点击文本链接时有2个动画：
- 单击时显示div，再次单击时将其隐藏(它工作得很好)
- 将另一个div的不透明度更改为0.5，并在再次单击时更改回不透明度(回到不透明度=1)。
不透明度在单击时起作用，但在第二次单击时，我无法使它返回到opacity=1。
我试过：
.fadeTo，.fadeToggle，但我做不到.
因此，当点击"#edition2014“时，".menu_edition_2014”和“#菜单”会随着淡出动画逐渐消失到0.5，而当再次单击"#edition2014“时，".menu_edition_2014”隐藏和“#菜单”消失为1，动画中会出现淡出。
以下是我的Jquery：
$(document).ready(function() {
$('#edition2014').click(function() {
$('.menu_edition_2014').slideToggle("slow");
$( '#menu' ).fadeTo( "fast", 0.5);
});
});下面是一个小摆设：http://jsfiddle.net/APA2S/1500/
非常感谢你的帮助，
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-22 10:56:08
你可以做这样的事
$( '#menu' ).fadeTo( "fast", $('#menu').css("opacity") == "1" ? "0.5" : "1");Stack Overflow用户
发布于 2014-04-22 10:54:43
问题是，您正在切换幻灯片，但切换一个单一事件的方式淡出。
为什么不使用CSS解决方案，并切换一个类呢？另外的好处是风格和内容的分离，所以如果你想在以后的某个日期改变效果，就很容易编辑你的CSS。
演示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;
}Stack Overflow用户
发布于 2014-04-22 10:58:44
试试这个：
$('#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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23217413
复制相关文章
相似问题
腾讯云开发者
