javascript - 添加内容，滚动到它，隐藏旧内容

Question

我想实现如下动画效果；

http://jsfiddle.net/YKmu2/37/

这是核心代码；

    $("#c1").on( "click", function(event) {

    event.preventDefault(); 
    new_site = 'content1';

    if(site == new_site) {   $('[name="' + new_site + '"]').show();   }
    else {  

        $('[name="' + new_site + '"]').insertAfter('[name="' + site + '"]');
        $('[name="' + new_site + '"]').show();
        $.scrollTo('[name="' + new_site + '"]', 1000);

    }   

    setTimeout(function() {     
        $('[name="' + site + '"]').hide();              
        $.scrollTo('[name="' + new_site + '"]');
        site = new_site;                
        }, 1005);

});

当您单击其中一个链接时，与此链接关联的内容将附加到当前内容，并使用 scrollTo 插件执行滚动动画。

滚动动画结束后，旧内容被移除/隐藏。

只要用户单击链接并等待一切完成，一切都很好。 但是，当您在动画尚未完成时开始单击多个链接时，会发生很多奇怪的事情。

有人知道如何解决这个问题/使它可靠和防错吗？ 或者有人知道已经实现了这种效果的 jquery 插件吗？

谢谢!

Answer 1

这是动画排队的一个相对常见的问题，只有在没有动画发生时才会触发 Action ，但是在这种情况下，您需要检查页面是否正在滚动，这在感觉。

更新如下以修复滚动问题: 我在这里更新了你的 fiddle : http://jsfiddle.net/andyface/77fr6/ 以演示在触发内容更改之前检查页面是否已滚动到顶部。

当前工作的 fiddle : http://jsfiddle.net/andyface/77fr6/1/

我还采取了一些措施使您的代码更易于管理，我希望这实际上有所帮助。基本上我已经让事情基于类而不是个人 ID 工作，所以你只需要维护一点代码，如果你需要扩展它，你不必添加更多的代码块，只需几行额外的代码获取 ID，但是可以巧妙地做到这一点，甚至不需要它。

我所做的主要改动如下:

• 链接现在有一个 link 类，内容有一个 content 类。
• 然后使用链接的 ID 推断它们要触发的内容。
• 我还删除了超时并使用了 scrollTo() 回调功能，因为这会更可靠。
• 最后我添加了一个检查以查看页面是否在允许触发操作之前滚动到顶部

希望这对您有所帮助，但如果您需要更多解释，请告诉我

更新: 看到我错过了一个事实，即通过滚动位置限制操作，如果用户向下滚动，它们将停止工作，我改变了操作阻止的工作方式。

$(document).ready(function() {

    // HIDE CONTENT
    $('.content').hide();

    var site = '',
        scrolling = false;

    $(".link").on( "click", function(event) {

        // THIS IS JUST USED FOR TESTING TO SEE WHAT THE scrollTop() POSTION IS WHEN CONTENT IS SCROLLED - REMOVE console.log() WHEN IN PRODUCTION
        console.log($(window).scrollTop());

        event.preventDefault(); 

        // ONLY RUN THE SCRIPT IF THE PAGE HAS SCROLLED TO IT'S FINAL POSITION
        if( ! scrolling)
        {
            var new_site = null;        

            switch($(this).attr('id')) {

                case 'c1':
                    new_site = 'content1';
                    break;
                case 'c2':
                    new_site = 'content2';
                    break;
                case 'c3':
                    new_site = 'content3';
                    break;
            }

            if(site != new_site) {  

                // KEEP A TRACK OF IF THE PAGE IS SCROLLING OR NOT
                scrolling = true;

                $('#' + new_site).insertAfter('#' + site);
                $('#' + new_site).show();
                $.scrollTo('#' + new_site, 1000, function() {

                    // CALLBACK TRIGGERED WHEN SCROLLING HAS FINISHED
                    $('#' + site).hide();
                    $.scrollTo('#' + new_site);
                    site = new_site;

                    // TELL THE PAGE IT'S OK TO DO STUFF COS WE'RE NOT SCROLLING IT ANYMORE
                    scrolling = false;
                });   
            }   
        }
    });
}); 

http://jsfiddle.net/andyface/77fr6/1/