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

Question

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

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

我的 fiddle :http://jsfiddle.net/iamraviteja/qupdjzcv/3/

Answer 1

我认为您需要决定是要使用top-属性还是bottom-动画属性，以及对两个动画使用相同的属性，否则你会得到冲突的声明设置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');