0

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、最後のショップの後に追加されます。

注: この 2 行のコードは機能していますが、少し調整する必要があります。

ありがとう。

4

2 に答える 2

1

これを試しましたか：

$('html, body').animate({
    scrollTop: $("#copyright").offset().top
  }, 500, function(){
    $("<%= j(render 'shop') %>").hide().appendTo($("#shops")).slideDown("fast");
});
于 2013-09-10T06:32:10.697 に答える
0

最初に、アニメーションがいつ終了したかを知るために 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');
            }
          })
      }

);
于 2013-09-10T06:33:11.703 に答える