div переходит в IE с использованием jquery.fadeOut - PullRequest
Новая
       6

div переходит в IE с использованием jquery.fadeOut

0 голосов
/ 10 мая 2011

У меня есть несколько div, между которыми я исчезаю, когда пользователь нажимает на вкладки в верхней части страницы, я заполняю эти div из html-файлов с помощью jquery.load ().

Моя проблема в том, что когда я кликаю между ссылками вверху, исчезает текущий показ div, он перемещается вниз по странице примерно на 20-30px. Это происходит только в первый раз, после того, как я впервые щелкнул вкладку, у всех последующих нажатий вкладок такой проблемы нет (так как div уже переместился вниз по странице). Имеет ли все это смысл?

HTML 

<div id="menu_nav">
    <a href="#item1" class="menu_nav_a active">Item 1</a>
    <a href="#item2" class="menu_nav_a">Item 2</a>
    <a href="#item3" class="menu_nav_a">Item 3</a>
    <a href="#item4" class="menu_nav_a">Item 4</a>
</div>
<div id="menu_outer">
    <div id="item1" class="menu_container"></div>
    <div id="item2" class="menu_container" style="display:none"></div>
    <div id="item3" class="menu_container" style="display:none"></div>
    <div id="item4" class="menu_container" style="display:none"></div>
</div>

JQuery 

$(function(){
    $('#item1').load('/path/to/item1.html');
    $('#item2').load('/path/to/item2.html');
    $('#item3').load('/path/to/item3.html');
    $('#item4').load('/path/to/item4.html');

    $('.menu_nav_a').click(function() {
        if(!$(this).hasClass('active')) {
            menu=$(this).attr('href');
            $('a.active').removeClass('active');
            $(this).addClass('active');
            $('.menu_container:visible').fadeOut('fast', function() {
                $(menu).fadeIn('fast'); 
            });
        }
        return false;
    });
});

CSS 

#menu_outer {margin-top:100px;}

.menu_container {padding-bottom:60px;
    background: #FFFFFF url(/path/to/image.png) no-repeat bottom center;
    display: block;}

.menu_nav_a {width:195px;height:35px;
     display:block;float:left;margin-left:7px;text-indent:-9999px;}
...