combining effects in jquery

Question

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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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"></script>

      <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>

Duplicate of http://stackoverflow.com/questions/734554/jquery-fadeout-then-slideup and possible duplicate of http://stackoverflow.com/questions/1598129/what-determines-the-execution-order-of-methods-in-jquery-chains/ — hasen, Oct 24 '09 at 17:35

score 1 · Answer 1 · answered Oct 24 '09 at 17:25

1

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.

answered Oct 24 '09 at 17:25

gargantuan

8,888
16
67
108

score 0 · Answer 2 · answered Oct 24 '09 at 17:27

0

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

answered Oct 24 '09 at 17:27

IProblemFactory

9,551
8
50
66

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

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.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 24 '09 at 17:28

hasen

161,647
65
194
231

combining effects in jquery

3 Answers3