jQuery UI ci mette a disposizione l'effetto drop. Questo effetto può essere usato sia per far comparire che per far
sparire gli elementi. Vediamone un esempio pratico.
Abbiamo quattro colonne che contengono una serie di immagini nascoste. Al passaggio del mouse vogliamo far apparire le immagini e quindi farle scomparire quando si passa alla colonna successiva.
Il codice è molto semplice:
$(function() {
$( 'div.wrapper', '#gallery' ).each(function() {
var $div = $( this );
$div.mouseenter(function() {
$div.find( 'div' ).
stop( true, true ).
show( 'drop',
{
direction: 'left'
},
400);
});
$div.mouseleave(function() {
$div.find( 'div' ).
stop( true, true ).
hide( 'drop',
{
direction: 'right'
},
400);
});
});
});