jQuery: custom-animation

more at: http://www.learningjquery.com/2008/02/simple-effects-plugins helpers: http://labs.wondergroup.com/frameworks/jquery/jquery-mini-ui-effects-plugins/

by suri_295

HTML

<h1>jQuery custom animations</h1>

<hr>

<div class=outer>
    <div class=box>Foo Bar</div>
</div>

<div class="area">
    <input type=button value="flash" id=flash>
    <input type=button value="wiggle" id=wiggle>
    <input type=button value="zap" id=zap>
    <pre><code></code></pre>
</div>    

<hr>

<div class="area">
    <input type=button value="fadeToToggle" id=fadeToToggle>
    <input type=button value="slideFadeToggle" id=slideFadeToggle>
</div>

<hr>

<div class="area">
    <input type=button value="blowToggle" id=blowToggle>
    <input type=button value="blowOut" id=blowOut>
    <input type=button value="blowIn" id=blowIn>
</div>

<hr>

<div class="area">
    <input type=button value="blindLeftToggle" id=blindLeftToggle>
    <input type=button value="blindLeftOut" id=blindLeftOut>
    <input type=button value="blindLeftIn" id=blindLeftIn>
</div>

<hr>

<div class="area">
    <input type=button value="blindRightToggle" id=blindRightToggle>
    <input type=button value="blindRightOut" id=blindRightOut>
    <input type=button value="blindRightIn" id=blindRightIn>
</div>

<hr>

<div class="area">
    <input type=button value="blindUpToggle" id=blindUpToggle>
    <input type=button value="blindUpOut" id=blindUpOut>
    <input type=button value="blindUpIn" id=blindUpIn>
</div>

<hr>

<div class="area">
    <input type=button value="blindDownToggle" id=blindDownToggle>
    <input type=button value="blindDownOut" id=blindDownOut>
    <input type=button value="blindDownIn" id=blindDownIn>
</div>

CSS

body{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
    background: #eee
}

h1 {color:black}

hr {
    margin:20px 0; padding:0;
    border: none;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #fff;
}

.area {
    min-height: 180px;
}

.outer {
    position: absolute;
    right: 0;
    overflow: hidden;
    height: 120px;
    width: 120px;
    margin: 20px;
    -webkit-transition: all .4s;
    
}
.outer .box {
    padding: 10px;
    height: 100px;
    width: 100px;
    line-height: 100px;
    color: black;
    text-align: center;
    background: deeppink
}

JavaScript

/*!
 * jquery.custom-animations.js 0.1
 * https://github.com/yckart/jquery-custom-animations
 *
 *
 * Copyright (c) 2012 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/02/08
**/


/*!
 * @param {number} times - The number of fades
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.flash = function (times, duration, easing, complete) {
    times = (times || 2) * 2;
    while(times--){
        this.animate({
            opacity: !(times % 2)
        }, duration, easing, complete);
    }
    return this;
};



/*!
 * @param {number} times - The number of shakes
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.wiggle = function (times, duration, easing, complete) {
    var self = this;

    if (times > 0) {
        this.animate({
            marginLeft: times-- % 2 === 0 ? -15 : 15
        }, duration, easing, function () {
            self.wiggle(times, duration, easing, complete);
        });
    } else {
        this.animate({
            marginLeft: 0
        }, duration, easing, function () {
            if (jQuery.isFunction(complete)) {
                complete();
            }
        });
    }
    return this;
};



/*!
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.zap = function (duration, easing, complete) {
    return this.css({
        overflow: 'hidden'
    }).animate({
        padding: 'toggle',
        width: 'toggle',
        height: 'toggle',
        margin: this.outerHeight() / 2 === parseFloat(this.css('marginTop')) || this.outerWidth() / 2 === parseFloat(this.css('marginLeft')) ? 0 : this.outerHeight() / 2 + ' ' + this.outerWidth() / 2
   ...