如何展开使用Ajax加载外部页面的div [英] How do I expand a div that loads an external page with ajax

问题描述

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

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

And I want the div that the content gets loaded into to expand and contract smoothly. So the height of <div id="pageContent"> should increase and decrease with a smooth transition.

推荐答案

与单独使用animate相比，此方法行之有效，并且更加流畅.

This will work and will be far smoother than using animate alone.

快速演示，减去此处的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 );

这篇关于如何展开使用Ajax加载外部页面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！