jQuery UI comes equipped with a blind effect bound to its effect() wrapper. This effect simply makes an element disappear with a particular resizing effect. blind accepts several parameters, which include mode, direction, speed and an optional callback function to be executed when the effect is complete. The first parameter can be either show or hide, meaning that the effect will show or hide an element. The second parameter, instead, can be horizontal or vertical and it simply makes the effect run from left to right or from top to bottom, depending on the mode you choose.
The third parameter is a value expressed in milliseconds or with the usual jQuery keywords used for animations. The callback function is interesting, because it allows us to concatenate multiple effects on the same element or on other elements. The syntax of this effect is:
element.effect('blind',
{
mode: 'show|hide',
direction: 'horizontal|vertical'
},
speed,
callback);
Let's create an example. We have a site container and an overlay element:
<body> <div id="site"> <!--site contents here--> </div> <div id="overlay"> <p>Loading...</p> </div> </body>
The following styles set up our example environment:
#site {display: none;}
#overlay {
position: absolute;
top: 0;
left: 0;
background: #666;
color: #fff;
width: 100%;
height: 100%;
min-height: 100%;
}
#overlay p {
font-size: 10em;
text-align: center;
position: absolute;
top: 50%;
width: 100%;
margin: -0.5em 0 0 0;
}
We want to hide the overlay, show the site contents and then make the overlay appear again with the text 'Loaded' within it. Here's how we can do using the blind effect:
$(function() {
setTimeout(function() {
$('#overlay').effect('blind',
{
mode: 'hide',
direction: 'vertical'
},
1000,
function() {
$('#site').fadeIn(1000, function() {
$('#overlay').effect('blind',
{
mode: 'show',
direction: 'horizontal'
},
1000,
function() {
$(this).find('p').
text('Loaded');
$('#site').hide();
});
});
});
}, 1000);
});
We've used both an horizontal and a vertical effect. You can see the results below.
qiqiqi...like on teater movies....hohoho