tags:

views:

43

answers:

3

How would I alter the below page and code so that when my 'news' P fades out the content below it... slides smoothly up instead of jumping.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

      <script>
      $(document).ready(function(){

        $("a").click(function () 
        {
          $("p").fadeOut(2000); 
          return false;
        }); 

      });
      </script>

    <style>
    p { 
        position:relative; 
        width:400px; 
        height:90px;
        background-color:#0099CC; 
    }

    </style>

    </head>

    <body>

    <p>
        this is a news box. it will fade out when the x is clicked that is all. (<a href="#">x</a>)
    </p>


<br />
does this shift up after fade out.<br />
</body>
</html>
+1  A: 

It will probably jump up when the element fades out.

You could try fading it to 0.001 so it's virtually invisible, then animate the height of p to 0 with a call back function.

gargantaun
A: 

Try slowly change height of p, imho it will be the best solution your problem.

Rin
A: 

Check out the accepted answer to this similar question: How to chain events in jQuery

Also this answer (to a different question) fadeOut then slideUp which seems to do exactly what you want.

hasen j