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

Question

I'm trying to add a Class to an existing div container and insert a new div (on success) 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 doesn't work correctly. The slideDown function doesn't work and the new div does already appear even if the previous function hasn't already finished.

Would be nice if someone could help me.

Answer 1

Your closing tag should be </script>

Also, the effect that you want may be the folowing:

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

Fiddle here

---

Edit: Based on you comment, I guess 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);
});

Fiddle here

Answer 2

after() doesn't take a callback.

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

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

Obviously, this will only work for elements that slideDown() actually works on.

Answer 3

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

This should do the trick. .addClass() only takes one input and .after() does not accept a callback function. However with the above example the class will be added and the html will be appended before the .slideDown() function is called.

Some Documentation Links:

• addClass() - http://api.jquery.com/addclass/
• after() - http://api.jquery.com/after/
• slideDown() - http://api.jquery.com/slideDown/