Question

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

我希望内容加载到的div能够顺利扩展和收缩。所以<div id="pageContent">的高度应该通过平稳过渡来增加和减少。

Answer 1

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

Answer 2

这将比单独使用animate更加顺畅。

A quick demo, minus the AJAX portion here.

;(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 );

如何展开使用ajax加载外部页面的div

2 个答案: