3

我有两个触发 jQuery 动画的分页链接。

动画上的回调函数触发第二个动画。

这很好用，但是，它仅在第一次调用该函数时才有效。

每次之后，2个动画中的第一个起作用，而第二个不起作用，它只是改变了没有效果的CSS。

我在这里绞尽脑汁，没有效果（双关语）。

function switchItem(e) {
    e.preventDefault();

    // If not current piece
    if($(this).hasClass('light')) {

        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();


        /*===================================================
        *   This is the Key part here
        ===================================================*/

            /* FIRST ANIMATION */

            container.animate({
                'right':'-100%'
            }, 300, 'swing',

            // Callback Function
            function() {

                $(this).html('').css({'left':'-100%'});

                $.get('inc/portfolio/'+link+'.php', function(data) {

                    container.html(data);

                    /* SECOND ANIMATION */

                    container.animate({
                        'left':'0%'
                    }, 300, 'swing');

                });
            });     
    }
}

这是演示：http ://eoghanoloughlin.com/my_site/#portfolio

4

3 回答 3

4

请参阅此处的工作示例，您的左侧与您的第一个右侧 -100% 动画冲突，最后如果您不重置右侧，那么它将与您的第二个左侧动画冲突

http://jsfiddle.net/PAdr3/2/

在动画之前向左重置

container.css('left', 'auto');

并在完成后重新设置

container.animate({
     'left':'0%'
 }, 300, 'swing', function() {
    $(this).css('right', 'auto');

 });
于 2013-04-17T14:31:32.107 回答
0

我认为在第一个动画准备好之前，动画函数不会串起来。文档说：

如果提供，则在动画完成后触发完整的回调函数。这对于将不同的动画按顺序串在一起很有用。

像这样的东西可能会起作用：

function switchItem(e) {
    e.preventDefault();
    // If not current piece
    if($(this).hasClass('light')) {
        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();

        /*===================================================
        *   This is the Key part here
        ===================================================*/
            /* FIRST ANIMATION */
            container.animate({
                'right':'-100%'
            }, 300, 'swing',
            // Callback Function
            function() {
                $(this).html('').css({'left':'-100%'});
                $.get('inc/portfolio/'+link+'.php', function(data) {
                    container.html(data);
                });
            }).complete(
                /* SECOND ANIMATION */
                container.animate({
                    'left':'0%'
                }, 300, 'swing');
            );     
    }
}
于 2013-04-17T14:27:51.453 回答
0

当您将页面中的 html 替换为新内容时，它不会自动添加侦听器或其他通过 javascript 添加的 jquery 增强功能。

我怀疑在将使用 $.get 获取的内容放入页面后，您需要再次应用这些内容。

另一种选择是在一次加载中添加所有内容，但隐藏第二页。这可能是比使用 $.get 更好的选择

于 2013-04-17T14:28:30.197 回答