Question

我想实现以下动画效果;

这是核心代码;

    $("#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

这是一个相对常见的动画排队问题，只有在没有动画发生的情况下才触发动作，但是在这种情况下你需要检查页面是否滚动，这在一个更抽象的感。

以下更新滚动问题：我在这里更新了你的小提琴： ~~http://jsfiddle.net/andyface/77fr6/~~ ，以证明在触发内容更改之前检查页面是否已滚动到顶部。

当前工作小提琴： 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/

追加内容，滚动它，隐藏旧内容

1 个答案: