JQuery IE8 div содержимое показывается до завершения slidedown ()? - PullRequest
0 голосов
/ 08 июня 2011

Надеюсь, основной вопрос!У меня есть стандартный слайд jquery, с тремя кнопками внутри.Когда завис, div скользит вниз обычным способом, чтобы показать ссылки.Все хорошо в FF / Safari, но в IE8 содержимое показывается, когда div скользит, давая действительно неприятный эффект.Демонстрационная страница находится по адресу http://james -golding.co.uk / staging / quocms /? Page_id = 29 .

JQuery довольно прост:

<script type="text/javascript">

          $(document).ready(function() 

          {ShowActionOnOver();

                $(".expandingbox",this).hide(); // hide all 
                $(".insidered",this).slideDown(500);

          });

function ShowActionOnOver()

        {$(".content").hover(function(){
                  if( $(".insidered").is(":visible") ) { $(".insidered").slideUp(500); }
                  $(".expandingbox",this).slideDown(500);

              },

              function()

              {$(".expandingbox",this).slideUp(500); }

            );}

CSS также стандартен для такого рода вещей:

.content {height:120px;}
.rel {z-index: inherit; zoom: 1; /* For IE6 */ position:relative; }

.expandingbox {
    width: 210px;
    height:100px;
    margin: 0 auto 0px auto;
    padding: 7px 6px 0px 6px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.php);
    overflow : hidden;
}

.insidered {border: 2px solid #b60000;}

.steps {
    width: 195px;
    height: 13px;
    margin: 0px auto 3px auto;
    padding: 8px;
    -moz-border-radius: 11px ;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    behavior: url(PIE.php);
    }

.stepslast {
    width: 195px;
    height: 13px;
    margin: 0px auto 0px auto;
    padding: 8px;
    -moz-border-radius: 11px ;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    behavior: url(PIE.php);
}

.label {
    width: 101px;
    height: 17px;
    margin: 0 auto;
    padding: 8px 0  5px 0;
     -webkit-border-radius: 0px 0px 11px 11px;
    -moz-border-radius: 0px 0px 11px 11px;
    border-radius: 0px 0px 11px 11px;
    behavior: url(PIE.php);
    color:#FFFFFF;

}    

Буду признателен за любые мысли по этому поводу - это сводит меня с ума!

Спасибо.

1 Ответ

0 голосов
/ 08 июня 2011

Это делает трюк: .expandingbox insidered{overflow:hidden;}

...