代码之家 › 专栏 › 技术社区 › ACP

jquery中隐藏的淡出效果

effect fadeout jquery

ACP · 技术社区 · 14 年前

我试图隐藏一个带有淡出效果的分区,但似乎不起作用。

$('#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 回复 | 直到 14 年前

griegs 14 年前

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

或

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

这意味着衰减需要250毫秒。

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

编辑

如果使用WebForms并发现ID不是您期望的那样,则可以使用类名称来代替ID。我其实更喜欢这种方法,因为它不太容易出错

编辑2

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

Richard Neil Ilagan 14 年前

您在错误分区中使用此选项:

<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');
     });
});

推荐文章

George Evans · 鼠标移动过快时,鼠标指针/鼠标移动标题交换不起作用

7 年前

user8463863 · Android淡入淡出动画问题

7 年前

a1anm · 滚动淡入/淡出在Safari中不起作用

7 年前

BeSafer · Javascript使文本逐字母淡入,然后淡出

7 年前

Raoul Unger · JQuery:使用fadeIn/fadeOut显示隐藏的div,同时保留间距/流

7 年前

Anakin · 如何使用纯JavaScript实现fadeOut效果

9 年前

Joseph Montecalvo · 在setTimeout上使用fadeIn fadeOut?

9 年前

cityy · fadeIn()在hide()之后不起作用,hide(()未到达.done()

9 年前

ajq88 · 使用jquery在幻灯片中淡化()图像

10 年前

Altin Ukshini · 使用fadeIn fadeOut使用jquery显示、隐藏复选框

11 年前