jQuery UI Animation Effects

jQuery UI Animation Effects

Posted by legacye in Code Samples on 03 4th, 2010 | no responses

The jQuery UI Effects Core brings a few more advanced animation techniques to the design table and this quick post will give you a complete example of how to use each effect (with an inline demo). They’re very straight-forward to use and could give you just that little extra eye-candy your project needs to make it memorable.I hope the post is useful!.

The Blinds Effect

 
$('#but-blind').toggle(
    function() {
        $('#blind').hide('blind', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#blind').show('blind', { direction: 'horizontal' }, 500);
    }
);

The Clipping Effect

 
$('#but-clip').toggle(
    function() {
        $('#clip').hide('clip', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#clip').show('clip', { direction: 'horizontal' }, 500);
    }
);

The Drop Animation Effect

 
$('#but-drop').toggle(
    function() {
        $('#drop').hide('drop', { direction: 'right' }, 1000);
    },
    function() {
        $('#drop').show('drop', { direction: 'down' }, 500);
    }
);

The Explode Effect

 
$('#but-explode').toggle(
    function() {
        $('#explode').hide('explode', {}, 1000);
    },
    function() {
        $('#explode').show('explode', { pieces: 30 }, 500);
    }
);

The Folding Effect

 
$('#but-fold').toggle(
    function() {
        $('#fold').hide('fold', {}, 1000);
    },
    function() {
        $('#fold').show('fold', {}, 500);
    }
);

The Puffing Effect

 
$('#but-puff').toggle(
    function() {
        $('#puff').hide('puff', {}, 1000);
    },
    function() {
        $('#puff').show('puff', {}, 500);
    }
);

The Sliding Effect

 
$('#but-slide').toggle(
    function() {
        $('#slide').hide('slide', { direction: 'right' }, 1000);
    },
    function() {
        $('#slide').show('slide',  direction: 'down' {}, 500);
    }
);

The Scaling Effect (Type 1)

 
$('#but-scale').toggle(
    function() {
        $('#scale').effect('scale', { percent: 50 }, 1000);
    },
    function() {
        $('#scale').effect('scale', { percent: 200 }, 500);
    }
);

The Scaling Effect (Type 2)

 
$('#but-scale2').toggle(
    function() {
        $('#scale2').hide('scale', {}, 1000);
    },
    function() {
        $('#scale2').show('scale', { percent: 100 }, 500);
    }
);

The Scaling Effect (Type 3)

 
$('#but-scale3').toggle(
    function() {
        $('#scale3').effect('scale', { percent: 200, direction: 'horizontal' }, 1000);
    },
    function() {
        $('#scale3').effect('scale', { percent: 50, direction: 'horizontal'  }, 500);
    }
);

The Pulsating Effect

 
$('#but-pulsate').toggle(
    function() {
        $('#pulsate').effect('pulsate', { times: 1 }, 1000);
    },
    function() {
        $('#pulsate').effect('pulsate', { times: 4 }, 100);
    }
);

The Bouncing Effect

 
$('#but-bounce').toggle(
    function() {
        $('#bounce').effect('bounce', { times: 2 }, 1000);
    },
    function() {
        $('#bounce').effect('bounce', { times: 4 }, 100);
    }
);

The Highlight Effect

 
$('#but-highlight').toggle(
    function() {
        $('#highlight').effect('highlight', {}, 1000);
    },
    function() {
        $('#highlight').effect('highlight', {}, 100);
    }
);

The Shake Effect

 
$('#but-shake').toggle(
    function() {
        $('#shake').effect('shake', { times: 2 }, 200);
    },
    function() {
        $('#shake').effect('shake', { times: 4 }, 100);
    }
);

The Transfer Effect

 
$('#but-transfer').toggle(
    function() {
        $('#transfer').effect('transfer', { to: '#transfer-to' }, 1000);
    },
    function() {
        $('#transfer-to').effect('transfer', { to: '#transfer' }, 500);
    }
);