CODEWITHSUNDEEP
jquery
netwire
netwire

Reputation: 7225

combining jquery .before() and .slideDown() or duration

I have a list of comments. After a user submit a new comment, I'd like the newly submitted comment to display before the add-comment form. I've got it to work so far, but I'd like the .before to be an animation.

More specifically, I'm trying to get the .before() action to animate/slide instead of just displaying. I currently have the follow code which is working for displaying.

el.find(".add-comment").before(new_comment);

I looked at jquery .before() and don't see a duration parameter. I also tried this but it doesn't work:

el.find(".add-comment").before(new_comment).slideDown();

Any suggestions?

Upvotes: 2

Views: 1801

Answers (1)

JeanValjean
JeanValjean

Reputation: 17713

Did you tried to use insertBefore() insted of using before()? They do the same task but with a reversed logic. In that way you can call the slideDown() function before to insert the piece of code. However, I suggest to hide the inserted code before doing the insertion operation.

In your case:

new_comment.hide().insertBefore(el.find(".add-comment")).slideDown();

where I assumed that new_comment is already JQuery object (if it is an HTML string use $(new_comment) instead).

However, sometimes the piece of code you are adding let your code doesn't working. It happened to me when I added multiple li elements at the same time. In this case, since you are adding new code that should automatically slide down your window, I suggest to use a little trick based on the use of fadeIn().

new_comment.hide().insertBefore(el.find(".add-comment")).fadeIn('slow');

In this way, when the window is slide down by the insertion of the new code, the fadeIn function will provide such a "slideDown" effect. I know, it is a little bit faded.

Upvotes: 3

Related Questions