Question

I have two p tags.

I need to show first p only.

After 5 or 10 seconds, the first p will fade out and second p will be fade in.

Also, I would like both texts to randomly fade in and out.

Answer 1

You can use this:

<p id="ptag1">
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p id="ptag2" style="display:none;">
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>


<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            setTimeFor2Hide();
        });

        function setTimeFor1Hide() {
            setTimeout("$('#ptag1').fadeIn(500)", 1200);
            setTimeout("$('#ptag2').fadeOut(500)", 700);
            setTimeout("setTimeFor2Hide();", 1000);
        }

        function setTimeFor2Hide() {
            setTimeout("$('#ptag1').fadeOut(500)", 700);
            setTimeout("$('#ptag2').fadeIn(500)", 1200);
            setTimeout("setTimeFor1Hide();", 1000);
        }
    </script>