Geek Answers Handbook

JQuery: How to combine addCLass () after () and slideDown ()

I am trying to add a class to an existing div container and insert a new div (if successful) below the existing one.

<script> $(document).ready(function(){ $(".entry").click(function(){ $('#content').addClass("col2",1000).after('<div class="box col2">test</div>', function(){ $(this).slideDown(); }); }); }); <script>

Unfortunately, this code does not work correctly. The slideDown function does not work, and a new div already appears, even if the previous function has not yet been completed.

It would be great if someone could help me.

+4
source share
3 answers

Your closing tag must be </script>

In addition, the effect you want may be as follows:

 $(".entry").click(function() { $('#content').addClass("col2").after('<div class="box col2">test</div>'); $('.box:last').hide().show(300); });

Spell here

Edit: Based on your comment, I assume that maybe you want this:

 $(".entry").click(function() { $('#content').addClass("col2"); setTimeout(function() { $('#content').after('<div class="box col2">test</div>'); $('.box:last').hide().show(300); }, 500); });

Spell here

+3
source

after() does not call back.

Instead, you need to create a new jQuery object for the new element, call slideDown() on it, and pass it to after() .
For instance:

 $(...).after( $('<div class="box col2">test</div>').slideDown() );

Obviously, this will only work for elements that slideDown() working slideDown() .

+1
source 
 $(document).ready(function(){ $(".entry").click(function(){ $('#content').addClass("col2").after('<div class="box col2">test</div>').slideDown(); }); });

That should do the trick. .addClass() accepts only one input, and .after() does not accept a callback function. However, in the above example, the class will be added and html will be added before the .slideDown() function is .slideDown() .

Documentation links:

0
source

More articles:


All Articles