Question

我有两个分页链接触发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

Answer 1

在这里查看工作示例，左边与你的第一个右边-100％动画相冲突，最后如果你没有重置右边那么它会与你的第二个左边动画冲突

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

在制作动画之前重置

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

并在完成时重置

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

 });

Answer 2

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

如果提供，则完成回调函数动画完成。这对于串联不同可能很有用动画按顺序排列。

这样的事可能有用：

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');
            );     
    }
}

Answer 3

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

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

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

更好的选择

动画回调中的jQuery动画只能工作一次

3 个答案: