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.
At the end of Chapter 5, we created an AJAX dialog 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 ajaxDialog.html
, add the source files for the clip effect:
<script type="text/javascript" src="development-bundle/ui/effects.core.js"></script> <script type="text/javascript" src="development-bundle/ui/effects.clip.js"></script>
Then change the dialog configuration object so that it appears as follows:
var dialogOpts = { modal: true, width: 388, height: 470, ...