Question

$('#gd').on('click', function(){
    $('.elact').insertBefore($('.elact').prev(), function(){
        console.log('done');  // doesn't work
    });
    $('#bsave').css('visibility', 'visible');  // works
});

insertBefore也可以。

console.log有什么问题？

Answer 1

insertBefore没有回调，因为它不是异步或动画操作。调用返回时，其工作已完成。（CSS动画/过渡可能使它看起来好像还没有完成，但是从DOM的角度来看，确实如此。如果发生了这种情况，请使用animation event处理程序或transition event处理程序。）

例如：

setTimeout(function() {
    const beforeMe = $("#before-me");
    console.log(
      "Is it there before the move?",
      beforeMe.siblings(".slidein").length > 0 ? "Yes" : "No"
    );
    $(".slidein")
        .insertBefore(beforeMe)
        .on("animationend", function() {
            console.log("Animation complete");
        });
    console.log(
      "Is it there _immediately_ after the move?",
      beforeMe.siblings(".slidein").length > 0 ? "Yes" : "No"
    );

}, 3000);

.slidein {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}

.parent {
  border: 1px solid #ddd;
  height: 10em;
}

<div class="parent">
  <div id="before-me"></div>
</div>
<div class="parent">
  <div class="slidein">I slide</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

移动一些dom元素后的回调函数

1 个答案: