使用ajax加载框架

时间:2012-08-09 13:13:55

标签: jquery ajax load

我想用ajax加载html。但我有问题。单击按钮时。我用jquery加载,容器中的html加载。容器是.project-detail。我希望容器从上到下是动画。但问题。我第一次点击按钮。它不起作用。当我第二次点击时,它正在工作。我错了什么?

function projectDetails() {
    var button = $(".list-portfolio"),
        slide = $(".project-detail");

    button.click(function(e){
        e.preventDefault();

        $(".project-detail").load("includes/ruimzicht.html");

        var height = $(".project-detail .column").outerHeight();
        slide.animate({height: height},600);

        $(".project-detail .column").css({ opacity: 0.5 });
    });
}

1 个答案:

答案 0 :(得分:3)

你需要等到ajax加载内容。我认为这段代码应该可行,

function projectDetails() {
    var button = $(".list-portfolio"),
        slide = $(".project-detail");

    button.click(function(e){
        e.preventDefault();

        $(".project-detail").load("includes/ruimzicht.html", function() {
            var height = $(".project-detail .column").outerHeight();
            slide.animate({height: height},600);

            $(".project-detail .column").css({ opacity: 0.5 });
        });        
    });
}