Jquery переключить вложенный div потеряет прозрачность после переключения вместо сохранения того же атрибута

Question

Здесь есть div2, который имеет прозрачность, используя тег стиля css.Однако прозрачность исчезает после переключения.Кажется, что он отлично работает с toggle (), но не переключается ([число]).

Есть исправления?Спасибо ребята.

не работает в IE7 ИЛИ 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

это потому, что вы используете $('#div2').toggle(400);, оно затухает + скользит, я думаю, что браузер (IE) перезаписывает значение при анимации, поэтому при переключении назад он просто увеличивается.

РЕДАКТИРОВАТЬ: возможные решения

• 1: используйте форму slideFadeToggle 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: обнаружил, что в IE это тоже не работает ... если вы действительно хотите, чтобы затухание, вы должны сделать это вручную, например, проверить, активен ли div, затем переключить (400), иначе animate ({... }, 400)

• 2: просто используйте сборку в slideToggle, она не использует замирание:

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

Удачи

Answer 2

Я получил его в Firefox, изменив CSS на:

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

Не знаю насчет IE.