Question

我能够部分地使我的代码正常工作。但是，我试图弄清楚如何防止表单元素动画＆＃34;当显示表单的每个部分时。我只希望它淡入/淡出。

当你点击Forgot Pin？或创建Pin？，隐藏的表单将切换。单击取消，将返回登录表单。

这是我的代码：

//click to show Forgot Pin and hide Login forms
jQuery('a.UHF_tabLink_forgotPIN').click(function (event) {
    event.preventDefault();
    jQuery('.forgotPin').show('slow');
    jQuery('#login').hide();
});

//click to show Login and hide Forgot Pin forms
jQuery('a.UHF_tabLink_cancel').click(function (event) {
    event.preventDefault();
    jQuery('#login').show('slow');
    jQuery('.forgotPin').hide();
});

//click to show Create Pin and hide Login forms
jQuery('a.UHF_tabLink_createPIN').click(function (event) {
    event.preventDefault();
    jQuery('.createPin').show('slow');
    jQuery('#login').hide();
});

//click to show Login and hide Create Pin forms
jQuery('a.UHF_tabLink_cancel').click(function (event) {
    event.preventDefault();
    jQuery('#login').show('slow');
    jQuery('.createPin').hide();
});

这是我的POC：http://jsfiddle.net/bkmills1/3k27g/1/

感谢您的帮助！

Answer 1

将.show（＆＃39; slow＆＃39;）更改为.fadeIn（＆＃39; slow＆＃39;）。这就是你想要的吗？

Answer 2

删除＆＃39;慢＆＃39;

更改：

jQuery('#login').show('slow');

为：

jQuery('#login').show();

Answer 3

如果我理解你的问题你可以改变

jQuery('.forgotPin').show('slow');

到

jQuery('.forgotPin').fadeIn('slow');

和

jQuery('.createPin').show('slow');

到

jQuery('.createPin').fadeIn('slow');

Answer 4

你应该使用

jQuery('ele').fadeOut(
    300, //the speed of fade out
    function(){ // callback function after fadeOut is finished
        jQuery('ele').fadeIn(300)
})

我已更新你的小提琴http://jsfiddle.net/3k27g/2

jQuery show / hide：表单元素

4 个答案: