jquery中隐藏的淡出效果

时间:2010-09-03 04:44:58

标签: jquery fadeout effect

我试图用fadeout效果隐藏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');似乎无法正常工作

2 个答案:

答案 0 :(得分:6)

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

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

意味着淡入淡出应该花费250毫秒。

确保您的元素的名称为messageDiv,而不是其他内容。

修改

如果使用webForms并且发现id不是您期望的id,则可以使用类名来代替id。我实际上更喜欢这种方法,因为它不那么受欢迎

编辑2

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

答案 1 :(得分:1)

你在错误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');
     });
});