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>")
}

);
}

为什么会发生这种情况？我也尝试将数字保持不变，但将方向从left更改为right，但这也无效。

已添加信息 这是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()是结果，然后al顺利，并导致div从屏幕滑落到左边广告被替换为live中的下一个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);
    });
}

Answer 2

在$(document).ready()

中包含上述功能

请找到小提琴链接。 https://jsfiddle.net/q7jud6yq/

为什么这些动画不是对立的？

2 个答案: