CODEWITHSUNDEEP
jquery
Behseini
Behseini

Reputation: 6328

How to Use .fadeIn() with .after() Function

Can you Please let me know why I cant use the .fadeIn() function at this code properly? What I would like to do is mixing the .after() and .fadeIn() together.

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

Upvotes: 0

Views: 110

Answers (2)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123513

If you're trying to .fadeIn() the <div class="err">:

The issue is that .after() will return the collection it was called on rather than a collection of the arguments. So, the statement is currently attempting to .fadeIn() the <input> instead.

For this, you can swap the elements' places and instead use .insertAfter():

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

Also note that to .fadeIn() any element requires that it's currently hidden -- either with CSS or .hide():

.err {
    display: none;
}

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

Upvotes: 3

Jason P
Jason P

Reputation: 27022

after() returns the original element, in your case the input. You can do this:

http://jsfiddle.net/HqhJ3/

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

Or instead use insertAfter():

http://jsfiddle.net/HaV7H/

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

Note that I also had to set the .err div to display:none; initially.

Upvotes: 3

Related Questions