jquery - 如何使用 .fadeIn() 和 .after() 函数

Question

你能告诉我为什么我不能.fadeIn()正确使用这个代码的功能吗？我想做的是将.after()and混合.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"); 
});

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

Answer 2

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

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

为此，您可以交换元素的位置，而是使用.insertAfter()：

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

---

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

.err {
    display: none;
}

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