jquery 中隐藏的淡出效果

Question

我试图隐藏具有淡出效果的 div，但它似乎不起作用。

$('#messageDiv').hide().fadeOut('slow'); 任何建议。

我使用自定义函数显示错误 div？

function getErrorMsgStyle(txt) {
    return "<table width='100%' border='0' cellpadding='0' cellspacing='0' align='center'><tr style='line-height:7px;'><td>&nbsp;</td></tr></table><div class='error_Style_Border' id='messageDiv'><a href='javascript:void(0);' onClick=\"$('#messageDiv').fadeOut('slow');\"  class='link'><table width='100%' border='0' cellpadding='0' cellspacing='0' align='center'><tr style='line-height:2px;'><td>&nbsp;</td></tr><tr><td class='table_error_Style_Border'><table width='97%' border='0' cellpadding='0' cellspacing='0' align='center' >" + "<tr style='line-height:2px;'><td colspan='15' align='center'></td></tr>" + "<tr ><td width='10px'>&nbsp;</td><td colspan='12' align='center' ><span class='error-txt'>" + txt + "</span></td><td width='10px' class='error-close'>X</td><td>&nbsp;</td></tr></table></td></tr>" + "<tr style='line-height:2px;'><td>&nbsp;</td></tr></table></a></div><a href='javascript:void(0);' onClick=\"$('#messageDiv').fadeOut('slow');\" class='link'><table width='100%' border='0' cellpadding='0' cellspacing='0' align='center'><tr style='line-height:7px'><td>&nbsp;</td></tr></table></a>";
} 

另外 $('#messageDiv').fadeOut('slow'); 似乎不起作用

Answer 1

$('#messageDiv').fadeOut('slow');

或者

$('#messageDiv').fadeOut(250);

意味着淡入淡出需要 250 毫秒。

还要确保您的元素具有 messageDiv 名称，而不是其他名称。

编辑

如果您使用 webForms 并发现 id 不是您所期望的，则可以使用类名代替 id。我实际上更喜欢这种方法，因为它不太容易

edit 2

将您的 href 更改为 href='.' 并将您的点击事件更改为 $('# messageDiv').fadeOut('slow');返回 false;

Answer 2

您在错误 div 中使用了它：

<a href='javascript:void(0);' onClick=\"$('#messageDiv').fadeOut('slow');\"  class='link'>

因为无论如何您都在使用 jQuery，您可能希望通过为其提供 ID 并使用 jQuery live() 附加 onclick 事件来重写该特定标记。

使用：

<a href='#' id='hide_link' class='link'>

并在下面的某处使用以下 Javascript 代码：

$(document).ready(function(){
     $('#hide_link').live('click',function(e){
         e.preventDefault();    // this will prevent the default link-click action
         $('#messageDiv').fadeOut('slow');
     });
});