Элемент Dom не отображается после вызова ajax, если я не изменю размер окна

Question

Я создаю страницу с Laravel 4, и у меня странная проблема - DOM не отображается. На localhost он работает нормально, но если я проверяю страницу на сервере - DOM не отображается, пока я не изменю размер окна (тогда оно внезапно появляется).

$('#gallery li .overlay').click(function (e) {
    e.preventDefault();
    if(!$(this).hasClass('current')) {
        var url = $(this).attr('href');
        $('#gallery li .overlay').removeClass('current');
        $(this).addClass('current');

        $('#single').slideUp(function() {
            $.ajax({
                url: url,
                type: "GET"
            }).done(function (json) {
                    $('#single').html(json);

                    if ($(window).width() > 768)
                        $('.bxslider').bxSlider({
                            pager: false
                        });
                    else
                        $('.bxslider').bxSlider({
                            pager: false,
                            controls: false
                        });

                    window.history.pushState("object or string", "Title", url);

                    $('#single').slideDown();
                });
        });
    }
});

Ссылка на сайт: http://goo.gl/5OMlxh

Answer 1

Функции jQuery SlideUp() и SlideDown() ломают ваш DOM, поэтому он не работал должным образом

Answer 2

Эй, может быть, это происходит из-за проблемы с рендерингом, поэтому, пожалуйста, спрячьте страницу, а потом покажите, что это работает.

бывший

$("#outerDivid").hide();
setTimeout(function(){
$("#outerDivid").show();
},10);

поставить этот код после добавления данных AJAX в DOM