Блог

Вот где расположен сайт:http://pwnage.me /
Javascript находится здесь: {site}/scripts/main.js

Я использую jQuery для динамической загрузки содержимого в #container div на главной странице. Когда вы нажимаете ссылку на главной странице (например. «Тестовый проект 1»), он загружает содержимое из ajax.php и вставляет новый HTML в #container div. Я перепробовал множество различных решений, но я не могу получить высоту, соответствующую новому контенту. В итоге он просто выходит за пределы конца div. Однако, если вы перейдете к http://pwnage.me/projects/test , это работает так, как задумано. Я попробовал тот же способ, который я использую при загрузке страницы, но он не работает:

 $('#container').html(d);
var h = $('#container').height();
$('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
$('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
setTimeout("$('#container').html(d);", 300); //  d is saved in a global var so this works
setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);
  

Поэтому следует:

1. Получить новую высоту
2. Загрузите HTML-файл загрузочного изображения
3. Уменьшите высоту до нового значения и исчезните
4. Загрузите новый html
5. Исчезает в

Это работает так, как должно, за исключением того, что при загрузке нового HTML в первый раз div никогда не увеличивает высоту, чтобы соответствовать новому содержимому, поэтому он получает старое значение высоты.

Вы могли бы попробовать сделать это в своем animate вместо того, чтобы пытаться указать точную высоту. Кроме того, поместите свой загрузочный счетчик в div, который отделен от вашей области содержимого:

 $('#container').animate({ height: 'hide', opacity: 0 }, 300, function() {
    $('#container').empty();
    $('#loading').fadeIn();
});
  

Затем сделайте это, когда у вас будет новое содержимое (т. Е. в конце вашего AJAX-запроса):

 $('#loading').hide();
$('#container').html(d).animate({ height: 'show', opacity: 1 }, 300);
  

Я надеюсь, это поможет вам попасть в нужное русло.

Вы пробовали $.slideDown() ?

 var html = $(d);
d.wrap('<div />')
    .hide()
    .appendTo($('#container'))
    .slideDown();
  

Причина неправильного изменения размера контейнера заключается в том, что для содержимого установлена статическая высота, которая слишком мала.

Проблема, похоже, в том, что вы зафиксировали высоту контейнера на уровне 67 пикселей. По сравнению с примером, у которого не было фиксированной высоты контейнера до загрузки html.