0

I am trying jQuery fadeTo to fade background color of a div (error class), while keeping a inner div unchanged. But in Chrome and firefox both the "error" div and any text inside an inner div both get faded. In IE it works, just the error div gets faded but not any div inside it. How do I make work for all browsers?

Simply put I don't want any inner div to fade at all.

View -

<div class="error" style="display: inline-block;z-index:1;">
<div style="position:relative;z-index:2;">Error: <%= @a[:error] %>
</div>
</div>

html - 

<div class="error" style="z-index:1;height=300px;width=500px;">
<div style="position:relative; z-index:2;">Error: some error</div>
</div>

javascript - 

$(document).ready(function(){
$(".error").fadeTo("slow",0.20);
});
Majoris
  • 2,963
  • 6
  • 47
  • 81

2 Answers2

0

This is happening because the default backgronud for all elements is actually transparent. The inner div's transparent background shows the changing background of the outer div.

To prevent this simply give the div inside the error div an explicit background, e.g. with this css:

.error div { background: white; }

i.e. 'Give any div inside a div of class "error" a white background.'

Michael Slade
  • 13,802
  • 2
  • 39
  • 44
  • Tried that, didn't give the expected result. May be I didn't explain it properly. The error div has background color red which shall fade by jquery. The inner div has only some text in black color which I don't want jquery to fade. It shall stay as it was. – Majoris Apr 16 '12 at 03:23
0

See my answer here about using fadeTo. The simple answer is fadeTo won't let you do this, because opacity is applied to all subchildren. Use animate and set the background colour to have an alpha of 0.

Community
  • 1
  • 1
Kolichikov
  • 2,944
  • 31
  • 46
  • I think you'd be better writing the full answer on this, older, question; then flagging the new question as a duplicate. – Matt Raines Aug 21 '16 at 22:12