The Spry Effect from version 1.5 allow users to register their custom JavaScript observers. These observers will be automatically called by the effects in certain situation. This mechanism will let you better control and customize the page content and the animation running.
Any Effect will run the observers when the following events will occur:
There are 2 different ways to register an observer to any effect. The first supported way involves creating a specific object that will receive notifications. Methods are added to this object for each notification it wishes to receive. The object is then added as an observer on the desired effect.
The second way involves defining a callback function and registering it as an observer on the effect. The difference with using a callback function is that it will get called for *every* notification the effect dispatches. The function must check the notification type passed into it to see if it is a notification it is interested in handling.
This sample will register an observer object to a Slide effect. We have here 2 divs, one with 660 pixels width and the other with 0 pixels width. While the animation will collapse to left the first element, the observer will increase on each step notification the width of the right element. After the Slide will finish the right element will appear in the place of the left element.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.
Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum metus, ac placerat turpis eros tristique felis. Integer tempus vulputate mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor ipsum sed ante. Mauris magna.
Ut elementum quam et dui. Duis hendrerit, nulla vel laoreet dignissim, arcu justo luctus orci, quis porttitor ante justo interdum purus. Mauris ornare euismod dolor. Curabitur sed lorem. Nam non enim. Mauris dictum mollis massa. Proin a quam eget sem aliquet convallis. Proin dapibus felis vitae arcu. Pellentesque nonummy. Morbi vitae dolor eget purus nonummy posuere. Curabitur hendrerit rutrum lacus. Vestibulum in velit nec est semper bibendum. Etiam tellus arcu, blandit vel, consectetuer id, congue et, tortor.
Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum metus, ac placerat turpis eros tristique felis. Integer tempus vulputate mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor ipsum sed ante. Mauris magna.
Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum metus, ac placerat turpis eros tristique felis. Integer tempus vulputate mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor ipsum sed ante. Mauris magna.
This second sample will use an observer function to register to a Grow effect. After the element animation will run, we will re-start the animation in the oposite direction and we will change the content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.
Using the observers we can fade in an image while fading out another one in parallel to obtain the replacement image effect. The observer will compute the complementary opacity value of the non animated container. The effect works in reverse direction too.