在使用jquery动画的另一个项目下面找到项目

时间:2016-09-20 10:53:58

标签: jquery animation append

我想在按钮下方找到一个div,在用户点击它之后会改变他的位置。

我为按钮实现了一个动画,当它完成时,会有一个回调函数“追加”新的div。新的div忽略了按钮的新位置,并且位于容器的顶部。

HTML:

<body>
    <div id="inner_body" style="position:relative;margin: auto;text-align: center;width:50%;margin-top: 200px">
        <button class="bc" id="0" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton A</button>
    </div>
</body>

JQuery的:

$(document).ready(function () {
    $(document).on('click', '.bc', function () {
         var x = $('#0').position().left;
         var y = $('#0').position().top;
         $('#0').css({ 'position': 'absolute', 'top': y + 'px', 'left': x + 'px' })

         $('#' + this.id + '').animate({ left: 0, marginTop: 0 }, "slow", function () {
              appendnow();
         });

     });

     function appendnow() {
         $('#inner_body').append('<div >Should be below button</div>');
     }
});

0 个答案:

没有答案