如何顺利更改元素的值？

Question

这里是我的代码：

$('button').on('click', function(){ 
 
    $('div').html('<p>something new!</p>').fadeIn(1000); 
 
});

div{ 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>something<p> 
 
</div> 
 
<br> 
 
<button>change div's value</button>

正如你看到的，我用fadeIn()，使更换价值，手术顺利进行。但仍然很快就会发生替换。我怎样才能对它施加影响？

Answer 1

你可以改变html前添加.hide（）：

$('button').on('click', function(){ 
 
    $('.d').hide().html('<p>something new!</p>').fadeIn(1000); 
 
});

div{ 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="d"> 
 
    <p>something<p> 
 
</div> 
 
<br> 
 
<button>change div's value</button>

Answer 2

只是把它藏在衰落前：

$('div').hide().html('<p>something new!</p>').fadeIn(1000); 

Answer 3

像这样的事情？

$('button').on('click', function(){ 
 
    var replacingDiv = $('div.replace'); 
 
    
 
    $(replacingDiv).fadeOut(500); 
 
    setTimeout(function(){ 
 
    $(replacingDiv).html('changed').fadeIn(1000); 
 
    }, 500); 
 
});

div{ 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="replace"> 
 
    <p>something<p> 
 
</div> 
 
<br> 
 
<button>change div's value</button>