CODEWITHSUNDEEP
jquery
mitchelangelo
mitchelangelo

Reputation: 899

Add animation to replaceWith() jQuery

I'm trying to animate a replace with jquery action specifically the item which I am replacing the div with 

jQuery('#banner-sign-up-container').replaceWith('<div id="credit-limit-receipt" class="receipt"></div>').animate({'margin-top': '50px'}, 4000);

I want the #credit-limit-receipt to slide upwards as shown in this fiddle but my code won't work. How do I do this?

I just want my text to roll up from the bottom like a receipt like in this jsfiddle https://jsfiddle.net/MvQsT/1/

Upvotes: 0

Views: 255

Answers (1)

saAction
saAction

Reputation: 2065

You are using replaceWith() which will replace banner-sign-up-container to credit-limit-receipt, So DOM value is changed, but jquery chain is still trying to find #banner-sign-up-container, but that is not available so animate will not work.

You need to brake this code in two line.

Check below example:

$(function(){
    $('#banner-sign-up-container').replaceWith('<div id="credit-limit-receipt" class="receipt">Hi there!</div>');
    $('#credit-limit-receipt').animate({'margin-top': '50px'}, 1000);
});
div {
    background-color:#2795ee;
    width: 640px;
    margin:auto;
    margin-top: 300px;
    font-size:16px;
    text-align:center;
    padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="banner-sign-up-container">Something</div>

Upvotes: 1

Related Questions