Can you have more than 1 jquery effect on a div?

Question

I'm on a project for work that requires push notifications. The functionality works fine but the project leader wants to add extra ui effects to the notifications.

To do this we are using jquery effects.

My situation:

• I have this push notification that has a square with a speech balloon next to it.
• They are in 1 div together which is hidden.
• If needed, the div will show with an effect.

What I would really like is that the block comes sliding down, and after 0.5 or 1 second the balloon will unfold or slide out.

Is this possible to do in one div or do I have to make 2 seperate divs?

Or maybe to describe it in a different way, can you set the effect on a div so it would only show a certain part of the div by setting sizes? (Show pixel 0 till pixel 150 or something.)

Thanks in advance :)

Edit:
Example image

Answer 1

You can do this using single div also by animating the height of the div from 0 to required height. Apart from controlling the height you need to set certain styles also like overflow:hidden on the div so that the overflowing content is hidden inside the div.