jquery - 如何扩展使用 ajax 加载外部页面的 div

Question

我有这个测试站点 http://italicsbold.com.au/ajax-demo/demo.html

我希望加载内容的 div 能够平滑地扩展和收缩。所以高度<div id="pageContent"> 应该随着平滑过渡而增加和减少。

Answer 1

这将有效，并且比animate单独使用要顺畅得多。

一个快速演示，这里减去 AJAX 部分。

;(function ( $, window, document, undefined ) {
        jQuery(document).ready(function($){
            $.ajaxSetup({cache:false});
            var previousTarget=null;
            var column = $('#columns').find('.column');

            $('#columns').find('a').click(function(e) {
                e.preventDefault()
            });
            column.click(function(){



                pageurl = $(this).attr('href');

                    if (!$(this).hasClass('animated')) {
                        column.not($(this).parent()).dequeue().stop().animate({
                            width  : 'toggle',
                            opacity: '0.5'
                        }, 1400, 'linear', function () {
                            if (pageurl != window.location) {
                                window.history.pushState({path: pageurl}, '', pageurl);
                            }
                        });
                    }

            }, function() {

                if (this==previousTarget) {
                    return;
                } else {
                    $(this).addClass('animated');
                    column.not($(this).parent()).dequeue().stop().animate({
                        width  : 'toggle',
                        opacity: '0.5'
                    }, 1400, 'linear', function () {
                        $(this).removeClass('animated').dequeue();
                        var post_id = $(this).find('a').attr("rel")
                        $("#page-container").html("loading...");
                        $("#page-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax/", {id: post_id},function(){
                            $('#page-container').trigger('create');

                        });
                        $('.bar').attr('href', '/');
                        previousTarget=this;
                        return false;
                    });
                    var space = ($(window).width() - 200);
                    $(this).dequeue().stop().animate({
                        width:(space/4)
                    },1400,'linear');
                }
            });
        });
    })( jQuery, window, document );

Answer 2

$('#pageContent').animate({height: 'hide'});
$.ajax({
    // ...
    success: function() {
        $('#pageContent').animate({
            height: 'show'
        });
    }
})