Add fadein effect to this jquery code

Asked

Viewed 231 times

1

Good morning! I am using the following code to pick up the result of a form and play it on the page without having to reload:

<script type="text/javascript"> // Script
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "salvaregistro.php",
                data: dados,
                success: function( data )
                {
                    document.getElementById('resultado').innerHTML = data;
                }
            });

            return false;
        });
    });
</script>

However this code only releases the text. I wonder if it has how to apply the fadein effect to the text appear softer say...

javascript jquery fadein

  • Did you know that you can choose one of the answers given to you as the most correct and that helped you the most? I saw that you didn’t pick any answers on any questions you asked. Didn’t you like anything? None helped you? Or just didn’t know it? And you can also vote for anything you find interesting on website. Voting helps classify quality content. You can vote on all questions and answers you think are useful, not just answers given in your questions. See [tour] for more. I suggest to review all answers and accept one whenever possible.

  • Oops, I just picked the answer

  • 1

    Great, don’t forget to review all your questions and see where you can accept something as the final solution for you. http://answall.com/users/21825/guilherme?tab=questions

2 answers

2


Puts a display: none; in the element #resultado and exchange that:

document.getElementById('resultado').innerHTML = data;

therefore:

$('#resultado').html(data).fadeIn();

  • So brother worked perfectly, the problem is that is not catching more the class of div: <div class='Alert Alert-Danger' role='Alert'>Please type a User! </div>

  • I don’t understand. This is the div of the result?

  • Yes. In the case in the validation . php file I put the following: echo "<div class='Alert Alert-Danger' role='Alert'>Please enter a User! </div>"; And when the result appears in the oasis, it does not appear with this applied class, it appears with it literally written... Imagme: http://puu.sh/g2bBN/307dbcc8a8.png

  • Ah, you have to change text() for html() then. I will edit the answer.

  • That! It worked perfectly xD Thank you very much!!

  • You can accept this answer. How and why to accept an answer?

Show 1 more comment

0

Try something like this:

<script type="text/javascript"> // Script
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "salvaregistro.php",
                data: dados,
                success: function( data ){
                    jQuery('#resultado').hide(0).html(data).fadeIn(400);
                }
            });

            return false;
        });
    });
</script>

Browser other questions tagged javascript jquery fadein

You are not signed in. Login or sign up in order to post.