Question

我希望为用户提供互动体验..我希望保持响应能力。我尝试通过制作纸牌游戏来学习网络。

我所拥有的是要点击的内容，它应该出现在页面的其他位置。（我到目前为止使用jQuery）

（简化）用例是：

var card = $('[card=X]').remove();
$('.board').append(card);

现在我想为它添加一些动画。

我未能选择合适的框架。在我试过的那些我无法移除的时候，或者动画消失了，当我试图在回调中调用删除时。这是可怕的，因为删除要么在回调之前发射，要么根本不发射。或者没有什么可以重新附加的.. 所以它应该更多只是＆＃39;模糊＆＃39;或者＆＃39;淡出＆＃39;。

所以我想用动画分离一个东西，把它放在别的地方，然后让它出现＆＃39;有动画。作为一个极好的奖励，这些动画将有一个方向，以便来自＆＃39;和＆＃39;在哪里去＆＃39;显示出现在最终用户身上。（如在这两个位置之间绘制的箭头或线条。）

（Sry因为没有更具体，但要求所有框架/库的问题似乎没有吸引力......）

<小时/> 编辑：尼克指出我正确的方向。我的问题是样板代码。我调整了他提供的代码。（添加淡入淡出的动画+让事情重新出现＆＃39;使用事件处理程序） ..我把他的答案标记为正确。（即使它不是，他也没有附加原始内容，而是创建了一个新内容。）

$('.cards ').on('click', '[card-id]', function() {
  $(this).fadeOut(1000, function() {
    var old = $(this).remove();

    $('.cards').append(old);
    old.fadeIn();
 });

Answer 1

考虑从Jquery使用.animate（）。你可以做很多事情。

查看API：http://api.jquery.com/animate/

Answer 2

for(var i = 0; i < 6; i++) {
  $('.cards').append('<div class="card" card-id="'+i+'"></div>');
}


  $('[card-id]').click(function() {
    $(this).fadeOut(2000, function() {
      $(this).remove();
      
      $('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>');
    });
  });

.card {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 180px;
  background-color: #F4F4F4;
  border: 1px solid #E8E8E8;
  border-radius:5px;
  margin: 15px;
  cursor: pointer;
}
.card:after {
  content: attr(card-id);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 700;
  font-family: courier, serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="cards"></div>

动画删除和附加DOM元素

2 个答案: