首先要理解同步，异步的概念，这个自己 Google。
jquery 的 animate 是异步的，也就是说在代码中，callback 的执行并不会等待动画执行完成在执行，而是在代码 animate 执行完成就执行了。

javascript    $("#p1").animate({ 
        width: "500px"
    }, 1000);
    callback();

我举个例子：

javascriptsetTimeout(function(){console.log(1);}, 1000);
console.log(2);

运行这个，输出的是 21 而不是 12。和上面是类似的原因。

function step1(callback) {
    $("#p1").animate({ 
        width: "500px"
    }, 1000);   //这句的意思是#p1 宽度设置为 500px,函数立即返回，不需要等待1000ms
    callback(); //执行上面这句立即会执行这一句，不会等到 1000ms 之后
}

不是变量的名字叫callback就是回调函数。
这样写才是运行完动画之后（1000ms）才调用callback

function step1(callback) {
    $("#p1").animate({ 
        width: "500px"
    }, 1000,callback); 
}

$("#p1").animate({ 
    width: "500px"
}, 1000); //[1]
callback();//[2]

//[1] ,[2] 也是异步执行的哦

试试这样写：

javascript   function step1(callback) {
        $("#p1").animate({
            width: "500px"
        }, 1000, function () {
            callback();//在 animate 执行完成后再调用 callback 
        });
    }

    function step2() {
        $("#p1").animate({
            height: "500px"
        }, 1000, function () {
            console.log($("#p1").width());//在 animate 输出 p1 的 width
        });
    }

    $(function () {
        $("input").on("click", function () {
            step1(step2);
        });
    })

javascript 是非阻塞的

javascript$("#p1").animate({
  height: "500px"
}, 1000);
callback();//这个动画执行需要1秒，但是callback 会马上触发；

楼主没有理解同步和异步的概念，而且JS是顺序执行的，即使运行到 $("#p1").animate({ width: "500px" }, 1000);程序也是直接就开始执行下一句的。所谓回调函数，你应该把callback函数放在animate里面

樓主的思路徹頭徹尾錯了（我很多年前也犯過，因爲某 API 抽象層做得太完美了，剛開始和同步感覺沒有任何區別）

瀏覽器中的 js 沒有任何機制可以阻塞代碼執行，除了同步 xhr（然而這會導致頁面完全無法響應，遂已廢除）。