[英]How can I change the value of an element smoothly?
Here is my code: 这是我的代码:
$('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>
As you see, I've used fadeIn()
to make replacing-value-operation smoothly. 如您所见,我使用了
fadeIn()
来使替换值操作变得平稳。 But still replacement happens quickly. 但是更换仍然很快发生。 How can I apply an effect on it?
我如何对其施加效果?
You can add .hide() before change html
: 您可以在更改
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>
淡入淡出之前,只需将其隐藏即可:
$('div').hide().html('<p>something new!</p>').fadeIn(1000);
Something like this ? 像这样吗?
$('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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.