CODEWITHSUNDEEP
jquery
ian
ian

Reputation: 12335

combining effects in jquery

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>

Upvotes: 0

Views: 1136

Answers (3)

hasen
hasen

Reputation: 166162

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.

Upvotes: 0

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

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

Upvotes: 0

gargantuan
gargantuan

Reputation: 8944

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.

Upvotes: 1

Related Questions