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透明度問題

回答

相關問題