Append and Slide together jQuery
Solution 1
Like SimpleCoder's solution, but in only one line using appendTo()
:
$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");
Demo: http://jsfiddle.net/V4SVt/336/
Solution 2
append()
returns a reference to the original selector, not what was appended. I think you are looking for this:
$('.insert-links').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>')
$('.insert-links').find(".new-link:last").slideDown("fast");
Live demo:
Solution 3
Although SimpleCoder's solution is perfectly valid, I'd do it like this:
i = 0;
$('#add-link').click(function() {
if(i < 9) {
$('.insert-links').append('<div style="display: none;" class="new-link link_' + i + '" name="link[]"><input type="text" /></div>');
$('.link_' + i).slideDown("fast");
i++;
}
if(i == 9) {
$('#add-link').fadeOut('200');
}
});
The reason for it would be that each link input
would get an ID in the form of a second class, which would come very handy for selecting them in case one wants to remove an element, should one accidentally add more than one needs. I have also added a fade out effect on the add-link
element so the user doesn't get confused that it just disappeared. Of course, it is just a matter of personal taste, but I find it more user-friendly.
Hope this helps.
Related videos on Youtube
Comments
-
MacMac almost 2 years
I have this append method which I made to add more input boxes until there is 10 of them which will disable into making more.
i = 0; $('#add-link').click(function() { if(i < 9) { $('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>'); i++; } if(i == 9) { $('#add-link').html(''); } });
Although, it's good. However, I want to implement a slideDown when appended, I've tried doing this:
$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");
Which doesn't work at all.
-
Carrie Kendall over 9 yearsbeing in one line just loses readability.. not sure what you're gaining with that
-
Doug S over 8 yearsThe one-line aspect is much less important that the .appendTo() use. That is the key change.