IE jQuery Показать / Скрыть проблемы с прыжками - PullRequest
Новая
       3

IE jQuery Показать / Скрыть проблемы с прыжками

1 голос
/ 04 апреля 2011

Я создаю веб-сайт, и у меня есть область контента с полями для отображения услуг компании. В моей навигационной панели у меня есть кнопка «Контакт». При нажатии кнопки «Контакты» область содержимого скрывается, и отображается контактный элемент. Это работает в Chrome и FF, но IE это большой беспорядок. Ниже приведен код.

HTML-код для области контактов: 

<div class="contact"> 
                    <h2>Contact Us</h2> 
                    <p>For emergencies or to arrange a quote, call <span style="font-weight:bold; color:red;">999</span>. Or use the form below and we'll get back to you shortly.</p> 
                    <form class="tab"> 
                    <label for="move">Your Name:</label> 
                    <input type="text" name="move"  class="move" /><br /> 
                    <label for="locate">Your Email:</label> 
                    <input type="text" name="locate" class="locate" /><br /> >  
                    <label for="contact">&nbsp;</label> 
                    <a href='#contact' class='contact-submit'>Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /> 
                    </form> 
                </div>

HTML-код для области содержимого: 

<div class="content"> 
                <div class="span-24 last"> 
                <p></p> 
                </div> 
                <div class="span-6 append-1"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra malesuada orci et lacinia. Ut ac augue diam. Fusce vitae felis velit, vitae vulputate libero. Pellentesque in nibh est, tincidunt ullamcorper dolor. Etiam condimentum semper sem a mollis. Cras faucibus, neque vitae egestas imperdiet, tellus lorem rutrum massa, eget ultrices libero purus quis mi. Aliquam erat volutpat. Donec non metus id sapien pulvinar consequat. Praesent ut lectus massa, id viverra orci. In hac habitasse platea dictumst.</p> 
                </div> <!-- END span-6 DIV --> 
                <div class="span-15 append-2 last prepend-bottom box2" style="overflow:hidden;"> 
                    <p>Cras viverra placerat luctus. Cras eu elit sit amet lectus pretium egestas id a est. Mauris pretium lacus non eros dapibus at tempus leo condimentum. Quisque a elit non massa mattis pretium vitae eu est. Curabitur vulputate iaculis tellus tincidunt bibendum. Aliquam erat volutpat. Aenean nec viverra augue. Duis ultrices velit sed sapien suscipit eget dictum dolor feugiat. Aliquam erat volutpat. Nulla cursus dolor ut turpis congue sollicitudin. In hac habitasse platea dictumst. Duis facilisis malesuada magna, sed porttitor tortor posuere sed.</p> 
                </div> <!-- END span-6 DIV --> 

                <div class="prepend-3 boxes prepend-top"> 

                    <div class="clearfix row"> 

                        <div class="module compact clearfix"> 
                          <h4><a href="electrical/">Electrical</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/electrical-image1.jpg" alt="" > 

                            <p>We also offer electrical installations and maintenance for both commercial and domestic.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                        <div class="module compact clearfix"> 
                          <h4><a href="plumbing/">Plumbing</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/plumbing-image1.jpg" alt="Property Maintenance and Refurbishment" > 

                            <p>We offer plumbing for the commercial industry, no matter if it's big or a small job.<br /></p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 

                        <div class="module compact clearfix"> 
                          <h4><a href="security/">Security</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/security-image1.jpg" alt="Security" > 

                            <p>Security is key, that's why we are experts in the security field.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                    </div><!-- END clearfix row --> 
                </div><!-- END prepend-3 DIV --> 
            </div><!-- END content DIV -->

JQuery код: 

$('a.contact-close').click(function(){//If cancel has been clicked, show original content.

    $('div.contact').hide('slow', function(){


            $('div.content').show('slow', function(){
                $('div.boxes').show('slow').delay(700);
            });//END div.content show-slow

        });
    });

        //Below is the contact script
        $('div.contact').hide();//Hide div

        $('div.nav a.contact').click(function(){//If Contact has been clicked show Contact div
            $('div.boxes').hide('slow', function(){
                $('div.content').hide('slow', function(){
                    $('div.contact').show('slow');

                });
            });//END Boxes hide
        });

И CSS для этого находится на jsFiddle: http://jsfiddle.net/hart1994/Nh9tP/

В Internet Explorer он прыгает по рамкам во время скрытия. Затем при повторном показе он помещает их в ряды по два, а не по три. См. Ссылку на сайт ниже для полной демонстрации.

Возможно, вам придется перестроить это, поскольку оно может не отображаться в jsFiddle.

Или вы можете взглянуть на: http://molossi.psm2.co.uk/

Я уже пытался изменить jQuery на slideDown / Up и fadeOut / In.

Заранее спасибо!

1 Ответ

2 голосов
/ 04 апреля 2011

Методы jQuery hide() и show() "анимируют ширину, высоту и непрозрачность сопоставляемых элементов одновременно", так как высота и ширина изменяются, браузер повторно передает документ. Браузеры действительно изменяют поток данных по-разному, и в IE это заставляет окна прыгать. Вы можете использовать пользовательский jQuery animate() - возможно, только высоту? Именно уменьшающаяся ширина вызывает повторное течение всплывающих элементов.

Неправильный макет после выбора ссылки «Отмена» вызван тем, что jQuery оставляет style на <div class="boxes"> после анимации. Это приводит к тому, что box div неправильно очищает абзац слева и поэтому имеет меньшую ширину и, следовательно, не может разместить 3 дочерних элемента в строке. Вы можете удалить эти дополнительные стили jQuery, подключившись к обратному вызову в последнем методе show () следующим образом: 

$('div.boxes').show('slow', function() {
    $(this).attr('style', '');
}).delay(700);

Также отметим, что, вероятно, не поможет, что IE будет работать в режиме причуда . У вашей страницы нет типа документа, который, по моему опыту, может привести к нежелательным и неожиданным проблемам с рендерингом (особенно в IE). Помимо отсутствующего типа документа, есть несколько других незначительных проблем, которые приводят к тому, что ваша страница не проверяется .

Надеюсь, это полезно: -)

...