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

Question

I am working on a project requiring push notifications. The functionality works fine, but the project manager wants to add additional ui effects to notifications.

For this we use 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 necessary, the div will be displayed with effect.

I would really like the block to slide down, and after 0.5 or 1 second the balloon unfolds or extends.

Is it possible to do this in one div or do I need to make 2 separate divs?

Or maybe describe it differently, can you set the effect on the div so that it shows a certain part of the div, setting the dimensions? (Display pixel 0 to pixel 150 or something similar.)

Thank you in advance:)

Edit:
Image example

Answer 1

You can do this using a single div, and also animate the height of the div from 0 to the desired height. In addition to controlling the height, you need to set certain styles, like overflow:hidden in a div, so that overflowing content is hidden inside the div.

Answer 2

I only partially understood your question (visual aids would be nice: D), but what I got was that you either want to create effects in turn:

http://api.jquery.com/queue/

or effects occur in parallel:

How can I get jquery to do animations in exact parallel?

Hope this helps. Comment if I am not familiar!