对于动态添加的元素，动画无法正常工作答案

【问题标题】：Animation not working properly for dynamically added elements对于动态添加的元素，动画无法正常工作
【发布时间】：2015-11-05 19:45:21
【问题描述】：

使用箭头向上和向下移动的动画不能正常工作，向上移动是正确的动画但不能向下移动。

HTML：

<div class="makeit_steps"></div>
<div class="row margin-top">
    <div class="col-md-12">
        <div class="col-md-2">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span id="add-step" class="add-new">Add Step</span>
        </div>
        <div class="col-md-2">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span id="add-heading" class="add-new">Add Heading</span>
        </div>
    </div>
</div>

JavaScript：

动态添加步骤：

$('#add-step').click(function () {
    $('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="steps">Step</span><span><textarea class="form-control" rows="3" cols="105"></textarea></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>');
    $('.step_remove').click(function () {
        $(this).closest('.moving').remove();
    });
    $(".glyphicon-circle-arrow-up").click(function () {
        var $current = $(this).closest('.moving')
        var $previous = $current.prev('.moving');
        distance = $current.outerHeight();
        if ($previous.length !== 0) {
            $.when($current.animate({
                top: -distance
            }, 600),
            $previous.animate({
                top: distance
            }, 600)).done(function () {
                $previous.css('top', '0px');
                $current.css('top', '0px');
                $current.insertBefore($previous);
            });
        }
        return false;
    });

    $(".glyphicon-circle-arrow-down").click(function () {
        var $current = $(this).closest('.moving')
        var $next = $current.next('.moving');
        distance = $current.outerHeight();
        if ($next.length !== 0) {
            $.when($current.animate({
                bottom: -distance
            }, 600),
            $next.animate({
                bottom: distance
            }, 600)).done(function () {
                $next.css('bottom', '0');
                $current.css('bottom', '0');
                $current.insertAfter($next);
                animating = false;
            });
        }
        return false;
    });
});

动态添加标题：

$('#add-heading').click(function () {
    $('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="step_heading">Heading</span><span><input type="text" ></input></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>')
    $('.step_remove').click(function () {
        $(this).closest('.row').remove();
    });
    var animating = false;
    $(".glyphicon-circle-arrow-up").click(function () {
        if (animating) {
            return;
        }
        var $current = $(this).closest('.moving')
        var $previous = $current.prev('.moving');
        distance = $current.outerHeight(true);
        if ($previous.length !== 0) {
            animating = true;
            $.when($current.animate({
                top: -distance
            }, 600),
            $previous.animate({
                top: distance
            }, 600)).done(function () {
                $previous.css('top', '0px');
                $current.css('top', '0px');
                $current.insertBefore($previous);
                animating = false;
            });
        }

    });
    $(".glyphicon-circle-arrow-down").click(function () {
        if (animating) {
            return;
        }
        var $current = $(this).closest('.moving')
        var $next = $current.next('.moving');
        distance = $current.outerHeight();
        if ($next.length !== 0) {
            animating = true;
            $.when($current.animate({
                bottom: -distance
            }, 600),
            $next.animate({
                bottom: distance
            }, 600)).done(function () {
                $next.css('bottom', '0px');
                $current.css('bottom', '0px');
                $current.insertAfter($next);
                animating = false;
            });
        }
    });
});

CSS

.margin-top {
    margin-top:20px;
}
.glyphicon.glyphicon-circle-arrow-up, .glyphicon.glyphicon-circle-arrow-down {
    font-size:30px;
    margin-left:25px;
    cursor:pointer;
}
.add-new {
    color:#007acc;
    cursor:pointer;
}
.steps {
    font-size:16px;
    padding-left:30px;
    padding-right:20px;
}
.step_remove {
    font-size:16px;
    color:#007acc;
    margin-left:15px;
    cursor:pointer;
}
.step_heading {
    padding-left:15px;
    font-size:16px;
    padding-right:10px;
}
.makeit_steps {
    position: relative;
}
.makeit_steps .moving {
    position:relative;
}
.moving span {
    display:inline-block;
    vertical-align: middle;
}

我的小提琴：http://jsfiddle.net/iamraviteja/qupdjzcv/3/

【问题讨论】：

标签： javascript jquery css animation jquery-animate

【解决方案1】：

我认为您需要决定是否要使用top-property 或 bottom-property 进行动画，并使用相同两个动画的属性，否则你会得到相互冲突的声明，将top 和 bottom 同时设置为零，这对于浏览器来说是数学上无法解释的。

尝试将您的 JS 更改为：

$(".glyphicon-circle-arrow-down").click(function () {

    (...)

    top: distance
    }, 600),
    $next.animate({
        top: -distance
    }, 600)).done(function () {
        $next.css('top', '0');
        $current.css('top', '0');

【讨论】：

我想要两者，当我单击向上箭头时，将选定的一个与上面的一个交换，当我单击向下箭头时，将选定的一个与下面的交换一个
这很奇怪，你能给我新的改动吗？我没有在那里注册。
Erm，再次测试，有一个错字。现在只将top+distance 更改为distance，这有效，更新了任务，请重试。
是的，现在工作正常。但如果你也观察我就会出现故障
我想是的。实际上，我宁愿为运动选择margin-top，将其设置为distance，作为两个元素的正值或负值，然后在它们的位置切换后将其重置为零，就像你所做的那样，已经。

【解决方案2】：

试试这个 --

$('#add-step').click(function () {
$('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="steps">Step</span><span><textarea class="form-control" rows="3" cols="105"></textarea></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>');
$('.step_remove').click(function () {
    $(this).closest('.moving').remove();
});
$(".glyphicon-circle-arrow-up").click(function () {
    var $current = $(this).closest('.moving')
    var $previous = $current.prev('.moving');
    distance = $current.outerHeight();
    if ($previous.length !== 0) {
        //$current.insertBefore($previous);
        $.when($current.animate({
            top: -distance
        }, 600),
        $previous.animate({
            top: distance
        }, 600)).done(function () {
            $previous.css('top', '0px');
            $current.css('top', '0px');
            $current.insertBefore($previous);
        });
    }
    return false;
});

$(".glyphicon-circle-arrow-down").click(function () {
    var $current = $(this).closest('.moving')
    var $next = $current.next('.moving');
    distance = $current.outerHeight();
    if ($next.length !== 0) {
        $.when($current.animate({
            top: distance
        }, 600),
        $next.animate({
            top: distance
        }, 600)).done(function () {
            $next.css('top', '0');
            $current.css('top', '0');
            $current.insertAfter($next);
            animating = false;
        });
    }
    return false;
});
});

$('#add-heading').click(function () {
$('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="step_heading">Heading</span><span><input type="text" ></input></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>')
$('.step_remove').click(function () {
    $(this).closest('.row').remove();
});
var animating = false;
$(".glyphicon-circle-arrow-up").click(function () {
    if (animating) {
        return;
    }
    var $current = $(this).closest('.moving')
    var $previous = $current.prev('.moving');
    distance = $current.outerHeight(true);
    if ($previous.length !== 0) {
        //$current.insertBefore($previous);
        animating = true;
        $.when($current.animate({
            top: -distance
        }, 600),
        $previous.animate({
            top: distance
        }, 600)).done(function () {
            $previous.css('top', '0px');
            $current.css('top', '0px');
            $current.insertBefore($previous);
            animating = false;
        });
    }

});
$(".glyphicon-circle-arrow-down").click(function () {
    if (animating) {
        return;
    }
    var $current = $(this).closest('.moving')
    var $next = $current.next('.moving');
    distance = $current.outerHeight();
    if ($next.length !== 0) {
        // $current.insertAfter($next);
        animating = true;
        $.when($current.animate({
            top: distance
        }, 600),
        $next.animate({
            top: distance
        }, 600)).done(function () {
            $next.css('top', '0px');
            $current.css('top', '0px');
            $current.insertAfter($next);
            animating = false;
        });
    }
});
});

【讨论】：