CODEWITHSUNDEEP
javascriptjqueryhtmlappendslidedown
panagulis72
panagulis72

Reputation: 2169

SlideDown() doesn't work with After() in jQuery

I want to add an element to a list and I want that it slide down when is added. But using after() method it doesnt work. Why?

Html code:

<ul id="myUL">
 <li> First Item <li>
 <li> Second Item <li>
 <li> Third Item <li>
 <li> Fourth Item <li>

Add

Js code:

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li> A New Item </li>').slideDown("slow");
});

Fiddle full code: http://jsfiddle.net/gxs46L0u/

Upvotes: 0

Views: 74

Answers (3)

apieceofbart
apieceofbart

Reputation: 2197

First of all you need to close those li tags. HTML:

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>

Then for the js here's a quick and dirty way to do it:

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li style="display:none"> A New Item </li>');
  $('li:last').slideDown("slow");
});

You add an element without showing it and in the next step the slideDown will make it appear.

Upvotes: 1

guradio
guradio

Reputation: 15555

demo

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>

$('#add').click(function(e) {
  e.preventDefault();
  $('#myUL').append('<li> A New Item </li>');
});

Problem is your HTML is not closed properly close them and use append

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

Try this:

Jsfiddle: http://jsfiddle.net/sw9yLdt7/

<ul id="myUL">
  <li> First Item </li>
   <li> Second Item </li>
   <li> Third Item </li>
   <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>

USe this jquery:

$('#add').click(function(e){
    e.preventDefault();     
    $('<li> A New Item </li>').appendTo('#myUL').hide().slideDown();
});

Upvotes: 1

Related Questions