javascript - jQuery向下滚动到新的动态元素，然后slideDown查看新元素的效果

Question

使用 jQuery 1.10。我有以下内容：

$('html, body').animate({
    scrollTop: $("#copyright").offset().top
  }, 500);
$("<%= j(render 'shop') %>").hide().appendTo($("#shops")).slideDown("fast");

它所做的是向下滚动到页面末尾，然后附加新元素。但是当它滚动时，新元素已经是 slideDown 了。

问题：

1. 我希望用户向下滚动到页面底部，然后看到新元素 slideDown 以创建新元素创建的 UX 感觉。

2. 奖励：您注意到我滚动到#copyright页脚的位置。实际上我希望它滚动到将要附加新元素的确切位置（通常有很多shops，它将在最后一个商店之后附加。

注意：这两行代码都可以工作，只需要稍微调整一下。

谢谢。

Answer 1

你试过这个吗：

$('html, body').animate({
    scrollTop: $("#copyright").offset().top
  }, 500, function(){
    $("<%= j(render 'shop') %>").hide().appendTo($("#shops")).slideDown("fast");
});

Answer 2

首先，您可以使用 done 来了解动画何时完成查看动画示例：

    $( "p" ).animate({
      height: 200,
     width: 400,
     opacity: 0.5
     }, 1000, "linear", function() {
      alert( "all done" );
   });

请看下面的例子： http ://api.jquery.com/animate/

最后的函数是done事件

此外，您可以检测用户何时到达特定元素以开始您的动画，您可以使用以下内容：

jQuery(
      function($)
      {
        $('#flux').bind('scroll', function()
           {
            if($(this).scrollTop() + 
               $(this).innerHeight()
               >= $(this)[0].scrollHeight)
            {
              alert('end reached');
            }
          })
      }

);