JQuery render partial with nice fade in/out effect?

Question

I've got this:

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

Any way to put a nice transition effect on that?

I have tried .fade_in() .fade_out() show(slow) .hide().fadeIn(4000) in various places in the line, all break it

Answer 1

To make transition effect, you can use callback of fadeOut() function then you change content of your object and do fadeIn() to show it.

$('#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>