淡入，淡出动画不能很好地工作

我有这三个部分中，我希望当点击#startBtn当前section#step1逐渐隐藏的左侧和section#step2显示器渐渐的，这种事当点击#nextBtn其中section#step2隐藏并显示section#step3。淡入，淡出动画不能很好地工作

我收到一个问题，section#step1不隐藏，section#step3在点击#nextBtn时不显示。

另一个问题，我怎样才能使#nextBtn禁用，直到用户更改input[text]的值，如果有禁用的属性？我尝试使用nextBtn不透明度进行操作，但我不知道如何从悬停和单击事件中解除绑定。任何人都可以帮助我。感谢

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

来源

2014-03-02 R_soft

不错，按钮有残疾的属性。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes – isherwood

嗨isherwood，所以我应该用button标签替换标签？ –

如果你想通过其宽度设置为你应该设置CSS属性overflow:hidden; 0完全隐藏元素及其内容。

section#step3没有显示，因为#nextBtn有href=""，所以它是对当前文档的引用，只是点击刷新页面。你需要通过设置e.preventDefault();

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

至于#nextBtn禁用，防止默认<a>单击处理程序，只需添加一个类，并使用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/

来源

2014-03-02 02:04:02

谢谢马克，我得到一个很好的信息。所以，如果我也wana解除绑定#nextBtn的点击事件我尝试使用此http://jsfiddle.net/R_soft/R2RYs/4/，但它不起作用 –

那么你的绑定/解除绑定处理程序在'$（'＃uname'）。on（'input propertychange'，function（）{'所以它不会被解雇，除非用户在''字段中输入。（'＃nextBtn'）。click（next）;'。为了解决这个问题，你可以移除'click（）'事件或者触发输入改变事件 - '.trigger（ 'input'）;'。参见[http://jsfiddle.net/R2RYs/5/](http://jsfiddle.net/R2RYs/5/） –

太棒了！非常感谢你 –

淡入，淡出动画不能很好地工作

回答

相关问题