如何使用带有.after（）函数的.fadeIn（）

Question

您能告诉我为什么我不能正确使用此代码中的.fadeIn()函数吗？我想要做的是将.after()和.fadeIn()混合在一起。

$("input").blur(function(){
  $(this).after('<div class="err">There is an Error</div>').fadeIn("slow"); 
});

Answer 1

after()返回原始元素，在您的情况下输入。你可以这样做：

http://jsfiddle.net/HqhJ3/

$("input").blur(function(){
  $(this).after('<div class="err">There is an Error</div>').next('.err').fadeIn("slow"); 
});

或者使用insertAfter()：

http://jsfiddle.net/HaV7H/

$("input").blur(function(){
  $('<div class="err">There is an Error</div>').insertAfter(this).fadeIn("slow"); 
});

请注意，我最初还必须将.err div设置为display:none;。

Answer 2

如果您正在尝试.fadeIn() <div class="err">：

问题是.after()将返回调用它的集合而不是参数集合。因此，该声明目前正在尝试.fadeIn()改为<input>。

为此，您可以交换元素＆＃39;地方而是使用.insertAfter()：

$('<div class="err">There is an Error</div>').insertAfter(this)...

---

另请注意，要.fadeIn()任何元素要求当前隐藏它 - 使用CSS或.hide()：

.err {
    display: none;
}

$(...).hide().fadeIn("slow");