JQuery 渲染部分具有漂亮的淡入/淡出效果？

Question

我有这个：

$('#yummyCakeOptions').html("<%=j render partial: 'icings', locals: { icings: @icings }%>");

有什么办法可以给它加上一个漂亮的过渡效果吗？

我在线上各个地方都尝试过

.fade_in()

.fade_out()

show(slow)

.hide().fadeIn(4000)

，全都断了

Answer 1

要制作过渡效果，您可以使用 fadeOut() 函数的回调，然后更改对象的内容并执行 fadeIn() 来显示它。

$('#yummyCakeOptions').fadeOut(1000, function() {
    $(this).html("<%=j render partial: 'icings', locals: { icings: @icings }%>").fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yummyCakeOptions">Test</div>