Question

I am ajaxing in some text from a PHP script and trying to have it fade in to the page. However, I can’t get the fadeIn() function to behave. Here’s where I am:

<script type="text/javascript">
    $(document).ready(function(){
        $("#generate").click(function(){
            $("#quote p").load("sendText.php");
        });
    });
    </script>

<input type="submit" style="background-image: url(hitmebutton.png); height:8em; width:23em;" id="generate" value=""><br />
    <div id="quote"><p></p></div>

So sendText.php echos out some text. To get it to fade in when the button is clicked, I tried just doing

$("#quote p").load("sendText.php").fadeIn();

I also tried doing

$("#generate").click(function(){
        $("#quote p").load("sendText.php");
        $("#quote p").fadeIn();
    });

But neither worked. How do I get fadeIn() to apply? I feel like there’s something small I’m missing.

Answer 1

I assume you want to fade in the text when it is loaded. Furthermore, for fadeIn to work, the element must be hidden first. Try:

$("#quote p").load("sendText.php", function(){
    $(this).hide().fadeIn();
});

You could also hide the element before you load the content.