Jquery toggle nested div will lose transparency after toggling instead of preserving the same attr.

Question

There's a div2 here that has transparency using a css style tag. However the transparency goes away after toggle. It seems to work fine with toggle() but not toggle([number]).

Any fixes? Thanks guys.

doesn't work in IE7 OR FF 3.5

CSS

.transparentDiv
{
    filter:alpha(opacity=50);

    background-color:#d5ffd5;
    height:800px;
    width:300px;
}

CODE

<input type="button" id='btn1' value="Hide Something" />
     <div style=" background-image:url('../../images/bg.jpg'); background-repeat:repeat-x; border-style:solid;height:1000px;width:100%">
         <div id="div3" class="transparentDiv" style=" margin-top:30px; padding-left:300px;background-color: #4ddfff; height: 100px;position:absolute; width:950px">
     <br />
     <br />
     <br />

         </div>
        <div id="div2" class="transparentDiv"  >




         <h1></h1>



        </div>

    </div>


    <script src="http://jquery.com/src/jquery-latest.js"&gt;&lt;/script&gt;
     <script type="text/javascript">

         $(function() {

             $("#table1 tbody tr:even").addClass('zebra');
             $("#btn1").click(function() {

                 $('#div2').toggle(400); return false;
             });

         });





     </script>

Answer 1

I got it working under firefox by changing the CSS to:

.transparentDiv                          
{                                        
    /* IE */                             
    filter:alpha(opacity=50);            
    /* CSS3 standard */                  
    opacity:0.6;                         
    background-color:#000000;            
    height:800px;                        
    width:300px;                         
}

Don't know about IE.

Answer 2

its because you use $('#div2').toggle(400); it is fading + sliding, i think the browser (IE) overwrites the value when animating so when toggling back, it just goes up.

EDIT: possible solutions

• 1: use slideFadeToggle form this blog:

  $('#div2').slideFadeToggle(400);
  //With this (small) jquery plugin
  jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
  };
  

  EDIT2: found out this is not really working in IE either... if you really want the fade you have to do it manually, eg check if the div is active then toggle(400) else animate({...},400)

• 2: just use the build in slideToggle, it uses no fading:

  $('#div2').slideToggle(400);
  

Good luck