jquery animate for clostest div

Question

Please see my fiddle.

Javascript:

jQuery('.add-com').toggle(function() {
    jQuery(this).closest('div').find('.category-commentform').slideDown();
    return false;
  },
    function() {
      jQuery(this).closest('div').find('.category-commentform').slideUp();
    return false;
  });

By clicking the "Post comment one" or "Post Comment second", the comment form will be displayed. My Problem is If I click the "Post comment one" or "Post Comment second" I cannot view the form is there or not. Because lot of comments are displayed before the comment form. My friend suggest to use jquery animate. But I can not to achieve my results. How can i fix this??

Why not put the form right under the 'Post comment' button? Or move the button to the end of the comments list? It makes far more sense to have them together than to make the screen scroll by itself to the location of the form — Rory McCrossan, Sep 23 '15 at 06:47

score 3 · Answer 1 · answered Sep 23 '15 at 06:48

I think one thing you can do is to that element into view like

jQuery('.add-com').toggle(function () {
    var $form = jQuery(this).closest('div').find('.category-commentform').slideDown();
    var body = jQuery("html, body");
    $('html, body').stop().animate({
        scrollTop: $form.offset().top
    }, 2000);
    return false;
}, function () {
    jQuery(this).closest('div').find('.category-commentform').slideUp();
    return false;
});

Demo: Fiddle

score 1 · Accepted Answer · answered Sep 23 '15 at 06:53

1

Try .insertAfter(this)

jQuery('.add-com').toggle(function () {
jQuery(this).closest('div').find('.category-commentform').insertAfter(this).slideDown();
return false;

FIDDLE

answered Sep 23 '15 at 06:53

Muhammed Shevil KP

1,404
1
16
21

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

If you do not want to move your form right after the button as @Rory McCrossan suggests, you can use this DOM method scrollIntoView. Please see this answer.

Here's a quick edit to get you going: fiddle.

var form = jQuery(this).closest('div').find('.category-commentform');
form.slideDown("slow", function() {
    form[0].scrollIntoView();
});

edited May 23 '17 at 12:29

Community

1
1

answered Sep 23 '15 at 07:09

miraco

298
5
10

jquery animate for clostest div

3 Answers3