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

9.5k views Asked by At

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.

3

There are 3 answers

4
Benjamin Crouzier On BEST ANSWER

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

4
SLaks On

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.

2
Jasper On
$(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: