clostest div的jQuery动画

Question

请看我的小提琴。

http://jsfiddle.net/5gyqjncu/

使用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;
  });

通过单击“发表评论一个”或“发表评论第二个”，将显示评论表单。 我的问题是，如果我单击“一个发表评论”或“第二个发表评论”，则无法查看该表单是否存在。 因为很多评论显示在评论表单之前。 我的朋友建议使用jquery动画。 但是我无法实现我的结果。 我怎样才能解决这个问题？？

Answer 1

我认为您可以做的一件事就是将该元素放入视图

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;
});

演示： 小提琴

Answer 2

试试.insertAfter（this）

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

小提琴

Answer 3

如果您不想按@Rory McCrossan的建议在按钮后立即移动表单，则可以使用此DOM方法scrollIntoView 。 请看这个答案 。

这是一个快速的入门指南 ： 小提琴 。

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