Jquery slideToggle透明度问题答案

【问题标题】：Jquery slideToggle transparency issueJquery slideToggle透明度问题
【发布时间】：2012-08-14 16:58:45
【问题描述】：

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

这是我的代码，

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

【问题讨论】：

能否将您的问题复制到jsfiddle.net？
之前已经在stackoverflow上被问过。查看答案here

标签： jquery opacity slidetoggle

【解决方案1】：

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

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

也许有人有最简单的解决方案。

【讨论】：

谢谢查尔斯，但奇怪的是这并没有解决不透明度问题。这是我得到的效果。 i50.tinypic.com/35i4w79.jpg
对不起，我忘了把默认不透明度设置为 0。
好的，我终于找到了问题所在。这不是因为内容的不透明度与背景内容混合在一起。我的滑动面板位于固定在屏幕中的另一个面板的下方（它的不透明度也设置为 0.5），通过该面板我可以看到向下滑动的面板内容。我添加了 z-index:99;进入我的 CSS，所以向下滑动面板位于所有内容之上。顺便说一句，非常感谢您尝试我提供解决方案。
也许将来这个插件或firefox的内部功能可以帮助你addons.mozilla.org/fr/firefox/addon/tilt
谢谢查尔斯。这肯定会有所帮助，而且它是一个非常有用的插件。

【解决方案2】：

我不确定这是否可行，但请尝试一下。

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

或

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

【讨论】：

感谢Jignesh，这会以不同的方式制作动画，但不能解决不透明度问题。这是屏幕截图。 i50.tinypic.com/35i4w79.jpg
我怀疑这是因为您使用的是 filter: alpha(opacity=100);不透明度：1；尝试删除该 css 选项。值得一试。您可以随时根据需要更改切换动画类型。参考这个链接：jqueryui.com/demos/toggle
感谢 Jignesh，我想知道为什么 Jquery 默认会为滑动面板添加不透明度，还是我在这里遗漏了什么？感谢您的演示。这当然有帮助。
好的，我终于找到了问题所在。这不是因为内容的不透明度与背景内容混合在一起。我的滑动面板位于固定在屏幕中的另一个面板的下方（它的不透明度也设置为 0.5），通过该面板我可以看到向下滑动的面板内容。我添加了 z-index:99;进入我的 CSS，所以向下滑动面板位于所有内容之上。顺便说一句，非常感谢您尝试我提供解决方案。