Question

我正在开发一个字体测试页面，它应该在点击时切换标题和段落标记的字体。哪个工作正常，但经验非常刺耳所以我想用以下路径来平滑它：

淡出 - ＆gt;做字体交换 - ＆gt;淡出

但代码首先运行字体交换，然后运行动画。

我有以下代码片段，我只包含jQuery，因为它是我问题的根本原因。

// Anytime a card is clicked
$('.card').click(function(){
    // Call card by id and switch the fonts
    var id = "#" + this.parentElement.id;
    $(this).fadeOut(900,swapFont(id));
    $(this).fadeIn(500);
    // attach the above to some sort of transition callback

});

// Function to swap the font around so that the header is now the body font and the body font is now the header font
function swapFont(id) {
 // font-swap logic in here which works fine
}

Answer 1

问题是因为fadeOut()动画（有效）是异步的。这意味着将在动画进行过程中评估下一个语句 - 因此您将看到的行为。要解决此问题，您需要使用fadeX()方法提供的回调模式。

此外，您将立即执行swapFont()的结果传递给回调，而不是在事件发生时运行的函数引用。试试这个：

$('.card').click(function(){
  var id = "#" + this.parentElement.id;
  $(this).fadeOut(900, function() {
    swapFont(id);
    $(this).fadeIn(500);
  });
});

Answer 2

您当前正在传递swapFont()来电的结果，而您需要指向该功能本身。

所以这个：

$(this).fadeOut(900,swapFont(id));

与：

相同

 var x = swapFont(id);
 $(this).fadeOut(900, x);

最简单的方法是将其包装在匿名函数中：

$(this).fadeOut(900, function() { swapFont(id) });

修改

fadeIn也将在fadeOut完成之前执行。您可以添加.delay，或者更好的是，根据Rory的回答在回调中调用fadeIn（所以我在此不再重复）。

fadeOut（）回调在淡入淡出完成之前完成

2 个答案: