CODEWITHSUNDEEP
javascriptjqueryslidedownjquery-after
santa
santa

Reputation: 12512

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:

$('.myDiv').after('<div>added content</div>');

How do I combine it with slideDown?

Upvotes: 1

Views: 3427

Answers (4)

Sushanth --
Sushanth --

Reputation: 55750

You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added

Try this

$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>'); 

$('.myDiv').next('.newDiv').slideDown();

Upvotes: 1

w3jimmy
w3jimmy

Reputation: 712

first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">

then use a callback function to only start after the code was inserted in the document when you used the after() method.

$('.myDiv').after('<div class="newdiv">added content</div>', function(){
    $('.newdiv').slideDown();
});

Upvotes: -1

Pulkit Mittal
Pulkit Mittal

Reputation: 6086

Try this out:

$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();

Upvotes: 3

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14302

Try this instead :

$(".myDiv").after("<div style='display:none;'>added content</div>"); 
$(".myDiv").next("div").slideDown();

Good Luck !!

Upvotes: 4

Related Questions