Question

我已经尝试了几个小时

    $('#position-name').html('Successfuly Changed').fadeOut(1000);
    $('#position-name').html('New Name').fadeIn();

我知道这很简单但是，我不知道为什么如果我在我的代码中运行这些行只有新名称，尽管有特定的效果，它仍然会出现。

淡出新名称，然后再次淡化新名称

为什么它没有淡出或显示成功更改？

Answer 1

问题是：您的代码类似于 - 将元素html更改为'Successfuly Changed' - 然后fadOut()与1000直接更改到'New Name' - 你可以看到它fadeOut()然后fadeIn() ..为了避免你需要使用fadeOut()回调函数

$('#position-name').html('Successfuly Changed').fadeOut(1000 ,function(){
  $(this).html('New Name').fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="position-name"></div>

Answer 2

fadeOut和fadeIn都是异步函数。意思是，一旦你调用它们，动作将在后台发生，你的代码会立即返回并继续到下一个语句。

在你的例子中，你开始淡出超过一秒，但是一旦它开始你替换div的内容并淡入。因为淡出只运行了一微秒，jquery在内部取消fadeOut动作并运行fadeIn不需要做任何事情。

这两个功能都采用了第二个参数，即完整的＆＃39;打回来。您应该按如下方式构建代码。

  $('#position-name').html('Successfuly Changed').fadeOut(1000, 
    function () {
      $('#position-name').html('New Name').fadeIn();
  });

Answer 3

$( "#clickme" ).click(function() {
var message = $('#position-name');
    
message.html('Successfuly Changed').fadeOut(1000, function() {
  message.html('New Name').fadeIn("slow");
});
    
});

#box {
  width: 200px;
  height: 50px;
  outline: 2px solid;
  line-height: 50px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

You can add the next animation in the callback funciton of fadeOut.
After 1 second of the fadeout animation the new fadeIn will start.

<div id="box">
  <div id="position-name"></div>
</div>

<button id="clickme">CLICK ME</button>

为什么不淡出淡出jquery？

3 个答案: