jquery中隐藏的淡出效果答案

【问题标题】：fadeout effect with hide in jqueryjquery中隐藏的淡出效果
【发布时间】：2010-09-03 13:00:48
【问题描述】：

我正在尝试隐藏具有淡出效果的 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'); 似乎也不起作用

【问题讨论】：

顺便说一句，返回中的那些标签是什么？

标签： jquery fadeout effect

【解决方案1】：

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

或

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

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

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

编辑

如果您使用 webForms 并发现 id 不是您所期望的，您可以使用类名来代替 id。我实际上更喜欢这种方法，因为它的命中率较低

编辑 2

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

【讨论】：

@griegs 是的，我正在使用网络表单。但我仍然无法正常工作
将你的 href 更改为 href='.'和你的点击事件 $('#messageDiv').fadeOut('slow');return false;
@greigs 你能解释一下改变href的意义吗
我从未真正见过您在 void(0) 中使用的 javascript 表示法，因此我将其删除。 :)
谢谢，很高兴能帮到你。玩得开心@Pandiya

【解决方案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');
     });
});

【讨论】：