fadeIn，fadeOut动画效果不佳

如果要通过将元素的宽度设置为0来完全隐藏元素及其内容，则应该设置CSS属性overflow:hidden;。

将section#step3不显示，因为#nextBtn有href=""那么它的引用到当前文档，只是刷新上单击页面。您需要<a>通过设置阻止默认的点击处理程序e.preventDefault();

$('#nextBtn').click(function(e){
    e.preventDefault(); .....

至于#nextBtn禁用，只需添加一个类，然后使用CSS3选择器:not()并将其设置为悬停状态即可#uiHome p a.button:not(.disabled):hover。并非所有浏览器都支持此功能，但是您也可以为其应用新的悬停状态样式，.disabled以便它将覆盖先前设置的悬停状态。

#uiHome p a.button.disabled {
 opacity: .6;
 filter: alpha(opacity=60);
}

#uiHome p a.button.disabled:hover {
 color:#267BB6;
 background:white ;
 background-image:none ;
}

而不是blur()我认为最好在输入更改事件上添加禁用处理程序：

$('#uname').on('input propertychange', function() {
    if ($(this).val() == "") {
        $('#nextBtn').addClass("disabled");
    }else {
        $('#nextBtn').removeClass("disabled");
    }
});

看到这个jsfiddle：http : //jsfiddle.net/R2RYs/2/