The remaining effects of the jQuery UI library all work by showing and hiding elements in different ways rather than using opacity like most of the effects we have already looked at.
The slide
effect is no exception and shows (or hides) an element by sliding it into (or out of) view. It is similar to the drop effect that we just looked. Its main difference is that it does not use opacity. This is a very common effect on things like login forms that slide out from the headers of websites.
For our next example, we can create exactly this kind of functionality. In effectDrop.html
add a link to the CSS framework file and change the link to effectDrop.css
to effectSlide.css
:
<link rel="stylesheet" type="text/css" href="development-bundle/themes/smoothness/ui.all.css"> <link rel="stylesheet" type="text/css" href="css/effectSlide.css">
Then remove the container <div>
from the <body>
of the page and add the following HTML in its place:
<div id...