Question

How do I create a mouth that opens and closes on certain event (say clicking a button)
For simplicity sake, lets say the mouth is like a screen muncher.

Problems:

1. I need to get the upper and lower jaws somewhere in the middle. How do I make the two move simultaneously?

2. What will happen to the chin (the left and right border of the screen muncher) as the teeth come together? If I don’t make them resize automatically, they will exceed the lower jaw when the jaw is closing. How do I make them resize automatically?

Answer 1

You can try making complex css to make teeth and jaws can be made from divs with background. Then it is possible to animate css using jquery, but i’d say it is a quite difficult task only with jquery. Here’s a link to jquery animate function.

http://api.jquery.com/animate/

http://docs.jquery.com/Effects/animate