Clipping elements

The clip effect is very similar to the slide effect. The main difference is that instead of moving one edge of the targeted element towards the other, to give the effect of the element sliding out of view, the clip effect moves both edges of the targeted element in towards the center.

The clip effect has the same configuration options as the blind effect and these options have the same default values.

At the end of Chapter 5, The Dialog, we created an example that showed a full-size image in a dialog when a thumbnail image was clicked. When the close button on the dialog was pressed, the dialog was simply removed from the page instantly.

We could easily use the clip effect to close our dialog instead.

In dialog14.html, add the source files for the clip effect after the existing library files:

<script src="development-bundle/ui/jquery.ui.effect.js"></script>
<script src="development-bundle/ui/jquery.ui.effect-clip.js"></script>

Then, change the dialog configuration...