jquery - 为什么这些动画不是相反的？

Question

我正在尝试使用 jQuery 反向播放动画。原始动画(完美运行)如下:

    function initialSuccess(){
    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').next().animate({
                left: '50%'
            }, 300);

};
function initialError(){
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
$('#retryBtn').click(function() {


    $('#box3').empty();

    $('#box3').animate({
                left: '150%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').prev().animate({
                left: '50%'
            }, 300);
             $('#box3').append("<h3 class='step3-tag'>Let Us Check That For You, One Sec!</h3> <div class='loader'></div>")
}

);
}

有什么想法为什么会发生这种情况吗？我也尝试过保持数字不变，但将方向从左更改为右，但这也不起作用。

添加信息 这是 JsFiddle 示例，我正在尝试反转动画(如果用户按下按钮，则从 div 3 转到 div 2)

http://jsfiddle.net/jtbowden/ykbgT/

添加信息

    function initialSuccess(){
    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').next().animate({
                left: '50%'
            }, 300);

};
function initialError(){
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
$('#retryBtn').click(function() {


    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '-50%');
             });

            $('#box3').next().animate({
                left: '-50%'
            }, 300);

});
}

initialSuccess() 是结果，然后一切顺利，并导致 div 从屏幕滑到左侧广告被实时的下一个 div 替换。当另一个操作失败时，initialFailure() 会发生，并且应该充当某种“后退”按钮。 initialFailure() 的动画是失败/将 div 推向相同(错误)方向的动画，无论动画本身如何变化。

Answer 1

看起来您需要的是以下一组动画:

$('.box').click(function () {
    $('.box').each(function () {
        if ($(this).offset().left < 0) {
            $(this).animate({
                left: '50%',
            }, 500);
        } else if ($(this).offset().left > $('#container').width()) {
            $(this).css("left", "-150%");
        } else {
            $(this).animate({
                left: '150%',
            }, 500);
        }
    });
});

您可以在 http://jsfiddle.net/af88ukfx/1/ 查看包含 2 组动画的完整示例。

更新

我仍然不确定你的确切布局是什么以及到底应该发生什么，但我疯狂猜测我认为你需要这样的东西:

function initialError2() {
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
    $('#retryBtn').click(function () {
        $('#box3').animate({
            left: '150%'
        }, 300);

        $('#box3').prev().animate({
            left: '50%'
        }, 300);
    });
}