动画无法正常运行动态添加的元素

时间：2015-11-05 11:08:56

标签： javascript jquery css animation jquery-animate

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

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/

2 个答案:

答案 0 :(得分：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');

答案 1 :(得分：0)

试试这个 - 

$('#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;
        });
    }
});
});
相关问题
最新问题