Переключите div, чтобы открывать и закрывать при загрузке внешнего контента - PullRequest
Новая
       11

Переключите div, чтобы открывать и закрывать при загрузке внешнего контента

0 голосов
/ 04 марта 2012

Я хотел бы создать меню, которое при нажатии на элемент меню div будет анимироваться на высоту 400px, а затем загружать новый контент.

При щелчке по новому элементу меню поле будет анимировано до высоты 0, очистит старое содержимое, загрузит новое содержимое и затем вернет анимацию обратно к высоте 400.

Я начал код с функции переключения, но я немного застрял в загрузочной части и как включить ее в код.

Вот то, что я получил до сих пор 

$('.menu').toggle(function(){
    $('.opened').animate({height: 0, opacity: 0}, 1000).removeClass('opened');
    $('#bodyContent').animate({height: 400, opacity: 1}, 1000).addClass('opened');

    },
 function(){
    $('#bodyContent').animate({height: 0, opacity: 0}, 1000).removeClass('opened');
});

HTML 

 <a href="#" id="test">test</a>
 <a href="#" id="test2">test2</a>

Загрузка содержимого 

$('#test').click(function() {
        $('#bodyContent').load('test.html');
    });

    $('#test2').click(function() {
        $('#bodyContent').load('test2.html');
    });

Если бы я мог помочь,это было бы прекрасно!

Спасибо

РЕДАКТИРОВАТЬ:

Вот мой HTML-контент 

<div id="bodyMenuWrapper">
  <ul id="menu">
    <li><a href="#" id="test" class="menu">TEST</a></li>
    <li><a href="#" id="test2" class="menu">TEST 2</a></li>
  </ul>
</div>
<div id="bodyContent">
  CONTENT LOAD HERE             
</div>

1 Ответ

1 голос
/ 04 марта 2012

Это пока не подтверждено. Но я думаю, что должно работать следующее: 

$('a').click(
    function(){
        var id = this.id;
        $('#bodyContent').animate({'height' : '0'},500,
             function(){
                 $(this).load(this.id + '.html',
                     function(){
                         $('#bodyContent').animate({'height': '400px'},500);
                     });
             });
    });

Если вы сможете опубликовать свою HTML-структуру, я смогу опубликовать более полезный ответ.

...