如何淡出、定值、淡入；但要做得“更好”

Question

假设一个元素的值为 55：

<span id="some">55</span>

我想：

1. 淡出元素
2. 设置值 44
3. 淡入元素

所以我尝试了：

$("#some").fadeOut("slow").html("44").fadeIn("slow");

但是上面的首先将跨度的内容设置为 44，然后< /em> 淡出并淡入。

所以我尝试使用回调：

function fadeOutComplete(){
  $("#some").html("<%= @cc %>").fadeIn("slow");
}
$("#some").fadeOut("slow",fadeOutComplete);

现在这可以工作，但它看起来和感觉都很笨拙。有什么方法可以编写这个 DRYer 和更多 jQuery-er 吗？ （甚至不确定jQuery-er是什么意思！）

我如何传入要设置值的元素以及要设置为fadeOutComplete的值，所以我可以使该回调变得通用吗？

Answer 1

尝试这样：

$('#some').fadeOut('slow',function(){
$('#some').html('somehtml');
$('#some').fadeIn('slow');
});

Answer 2

这是淡入淡出命令的问题。该命令异步运行，这意味着当它淡出时，文本正在更改。查看这个问题的答案：jQuery 同步操作

Answer 3

检查这个...

$("#some").fadeOut("slow", function() {
   $(this).html("<%= @cc %>").fadeIn("slow");
});

• 您可以传递一个匿名函数，以防止注册一个毫无疑问只会使用一次的命名函数。
• 在 fadeOut() 的完整回调中，this 指向原生 DOM 元素。这允许您以 DRY 方式再次引用它。

Answer 4

相同的方法，但有一些清洁：

$('#some').fadeOut('slow',function(){
     $(this).html('somehtml').fadeIn('slow');
});