jquery slideToggle透明度问题

我正在使用jquery slideToggle在我的页面中拉下一个面板。问题是我无法在滑动中将透明度设置为“关闭”或（不透明度1），这会使其与背景内容混淆并混乱起来。我不希望我的下拉面板有任何透明度。我如何做到这一点。jquery slideToggle透明度问题

这里是我的代码，

$("#breakdown").click(function(){ 
    $("#breakdown_panel").slideToggle("slow"); 
});

凡为#breakdown是一个按钮，#breakdown_panel是一个div元素。

这里是CSS

#breakdown_panel { 
    position:absolute; 
    margin-top:-6px; 
    color: white; 
    background: rgba(71,71,71, 1); 
    height: 200px; 
    display: none; 
    width: 400px; 
    filter: alpha(opacity=100); 
    opacity: 1; 
}

这里是有问题的重叠的图像。 http://i50.tinypic.com/35i4w79.jpg

来源

2012-08-14 dushank

你能否在http://jsfiddle.net/上复制你的问题？ – Richard 2012-08-14 08:33:27

之前已经在stackoverflow上问过了。检查出答案[这里]（http://stackoverflow.com/questions/7672556/how-to-add-an-opacity-fading-effect-to-to-the-jquery-slidetoggle） – Bruno 2012-08-14 08:34:38

我不确定这是否有效，但试试看。

$("#breakdown_panel").toggle("slide")

或

$("#breakdown_panel").toggle("blind")

来源

2012-08-14 08:33:13 Jignesh

谢谢Jignesh，这样做动画不同，但它不能解决不透明问题。这是截图。 http://i50.tinypic.com/35i4w79.jpg – dushank 2012-08-14 09:04:58

我怀疑这是因为你使用的是filter：alpha（opacity = 100）; 不透明度：1;尝试删除该CSS选项。值得一试。您可以根据需要随时更改切换动画类型。请参阅此链接：http://jqueryui.com/demos/toggle/ – Jignesh 2012-08-14 09:15:13

感谢Jignesh，我想知道为什么Jquery默认为幻灯片添加不透明度，或者我在这里丢失了什么？感谢演示。这当然有帮助。 – dushank 2012-08-14 09:26:25

$("#breakdown").click(function(){ 

    $("#breakdown_panel").animate({ 
     opacity:1, 
     height: 'toggle' 
     }, 2000, function() { 
     // Animation complete. 
     }); 
});

也许有人有simpliest解决方案。

来源

2012-08-14 08:39:09

谢谢查尔斯，但奇怪的是这并没有解决不透明问题。这是我得到的效果。 http://i50.tinypic.com/35i4w79.jpg – dushank 2012-08-14 09:02:26

哦，对不起，我忘记提到默认不透明度设置为0. – 2012-08-14 09:15:20

好吧，我终于明白了这个问题。这不是因为内容的不透明度与混杂在一起的背景内容。我的滑动面板位于其他面板的下方，该面板固定在屏幕（它也具有设置为0.5的不透明度），并且通过该面板我可以看到滑动下来的面板内容面板内容。我已添加z-index：99;放到我的CSS中，所以滑下面板就是一切。顺便说一句，非常感谢您为我提供解决方案。 – dushank 2012-08-14 09:29:03

jquery slideToggle透明度问题

回答

相关问题