动画DOM元素

我想为我的用户互动体验的去除和附加..我想保持响应。我尝试通过制作纸牌游戏来学习网络。动画DOM元素

我有什么事情是去点击，这都应该是别的地方出现在网页上。（IM使用jQuery至今）

（简化）的使用情况是：

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

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

我未能在选择一个适当的框架。在我尝试过的时候，我无法时间去除，或者动画消失了，当我尝试在回调中调用删除时。这太可怕了，因为在回调之前或者根本没有开除。或者没有什么可以重新附加的。所以它应该更多，然后只是'模糊'或'褪色'。

所以我要分离的事情与动画，把它放在别的地方，使之“看起来”有与动画。作为优异的奖励，这些动画将有一个方向，以便“最终用户”看到“从”和“到哪里”。（像一个箭头或2个的那些位置之间画的线。）

（Sry基因不被更具体的，但问这个问题对于所有的框架/库那里不似乎吸引人..）

编辑：尼克指出我在正确的方向。我的问题是样板代码。我调整了他提供的代码。（添加淡入动画+事件处理程序重新出现） ..因此我标记他的答案是正确的。（即使它不是，他没有追加原有的东西，而不是他创造了一个新的。）

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

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

来源

2017-04-26 Zeitvertreib

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>

来源

2017-04-26 15:16:25

好看..级联函数调用可能是我必须滚动的东西。然而，动画“进入”可能很容易做到。我必须忍受这几个小时.. – Zeitvertreib

任何关于在点击卡被移除时将剩余卡片移动到“空白”点的动画的想法？ – Zeitvertreib

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

看一看的API：http://api.jquery.com/animate/

来源

2017-04-26 15:00:59

是啊，还有就是我开始。但是我有问题让我的代码等待这个或那个动画完成。（我知道我的问题是关于移动一个东西的具体问题......我对这个主题的研究也导致我假设jQuery.animate（）不是我能做的最好的）。无论如何感谢您的建议。 – Zeitvertreib

动画DOM元素

回答

相关问题