Question

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

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

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

问题：

我希望将用户向下滚动到页面底部，然后查看新元素slideDown，以创建一种感觉，即创建新元素。
奖励：您注意到我滚动到位于页脚的#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/

最后的功能是完成事件

此外，您可以检测用户何时到达特定元素以启动动画你可以使用这样的东西：

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

);

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

2 个答案: