Jquery toggle nested div verliert nach dem Umschalten die Transparenz, anstatt das gleiche attr zu bewahren

Question

Es gibt ein div2 hier, die Transparenz mit einem CSS-Style-Tag hat. Die Transparenz verschwindet jedoch nach dem Umschalten. Es scheint zu funktionieren gut mit toggle() aber nicht toggle([Zahl]).

Gibt es Abhilfe? Danke, Leute.

funktioniert nicht in IE7 ODER 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"></script>
     <script type="text/javascript">

         $(function() {

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

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

         });

     </script>

Answer 1

Das liegt daran, dass Sie $('#div2').toggle(400); Es ist Fading + Sliding, ich denke, der Browser (IE) überschreibt den Wert bei der Animation, so dass beim Zurückschalten, es geht einfach nach oben.

EDIT: mögliche Lösungen

• 1: slideFadeToggle-Formular verwenden este 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: herausgefunden, dass dies nicht wirklich funktioniert in IE entweder ... wenn Sie wirklich wollen, dass die Fade müssen Sie es manuell zu tun, z. B. überprüfen, wenn das div aktiv ist dann toggle(400) sonst animate({...},400)

• 2: Verwenden Sie einfach den eingebauten SlideToggle, er verwendet keine Überblendung:

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

Viel Glück!

Answer 2

Ich habe es unter Firefox zum Laufen gebracht, indem ich das CSS geändert habe:

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

Ich weiß nicht, wie es mit dem IE aussieht.