jquery - .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"); 
});

また、最初に.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");