Question

我有这三个部分，我希望点击#startBtn时，当前的section#step1会逐渐隐藏到左边，section#step2会逐渐显示，就像点击{{{ 1}} #nextBtn隐藏的地方并显示section#step2。

我遇到section#step3无法隐藏的问题，点击section#step1时section#step3没有显示。

另一个问题是，在用户更改#nextBtn的值之前，如何禁用#nextBtn，如果有禁用属性？我尝试使用input[text]不透明度进行操作，但我不知道如何从悬停和点击事件中解除绑定。谁能帮我。谢谢

http://jsfiddle.net/R_soft/R2RYs/1

Answer 1

如果要通过将其宽度设置为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/

fadeIn，fadeOut动画效果不佳

1 个答案: