CODEWITHSUNDEEP
javascriptjqueryappendfadein
Nick
Nick

Reputation: 4462

How do I add a fade to an append?

I haven't been able to adapt the examples I have found in stackoverflow that describe how to add a fade to an append, and I can't work out why.

I have the following code for using ajax to replace a contact form with a success message:

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('#message-form').append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>');
           });
         }
       });
       return false;

I am trying to get the append to fade in. I tried adding .hide().fadeIn(2000) after the append html, but this didn't work. Could someone help me out with this?

Thanks,

Nick

Upvotes: 0

Views: 1224

Answers (3)

Bhupendra
Bhupendra

Reputation: 1

<script type="text/javascript">
$(document).ready(function(){
    $("<h3>Records has been successfully modified.</h3>").appendTo("#body").fadeIn(2000).fadeOut(4000);
    //$("#body").html("<div id='message-form'></div>");

});
</script>

<style type="text/css">
h3{
    text-align:center;
    width:30%;
    padding:15px 0;
    top:100px;
    position:absolute;
    color:snow;
    left:35%;
    background:darkred;

    /*
     darkgreen, snow
    darkred, snow

     */
}
</style>

Upvotes: 0

Slipstream
Slipstream

Reputation: 14762

I prefer to hide before the append....
Something like this:

$(NEW_ELEMENT).hide().appendTo(SOMETHING).fadeIn();

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

If you add hide and fadeIn after append, the problem is that you will be hiding and fading the container, not the element you are adding. If you change it to appendTo it should work:

$(NEW_ELEMENT).appendTo(SOMETHING).hide().fadeIn(2000)

An example: http://jsfiddle.net/U4d9G/

Upvotes: 2

Related Questions