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

2019年7月2日 191次阅读

我正试图通过使用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()是结果,然后al顺利,并导致div从屏幕滑落到左侧广告被替换为live中的下一个div. initialFailure()在另一个操作失败时发生,并且应该充当各种各样的“后退”按钮.无论动画本身的变化如何,initialFailure()的动画都是以相同(错误)方向失败/推动div的动画.

最佳答案 看起来你需要的是一组动画：

$('.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);
    });
}
点赞