CODEWITHSUNDEEP
jqueryrenderfadeout
daveasdf
daveasdf

Reputation: 135

JQuery render partial with nice fade in/out effect?

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

Upvotes: 0

Views: 45

Answers (1)

SKJ
SKJ

Reputation: 2326

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>

Upvotes: 1

Related Questions