jQuery UI Effects demo

Demo for animating class toggles using the jQuery effect.core js.

by jamessouth

HTML

<div class="container">


    <span class="ball"></span>
</div>

CSS

.container
{
    border:solid 1px #000;
    margin:200px auto;
    position:relative;
    height:400px;
    width:500px
}

.ball
{
    position:absolute;
    bottom:20px;
    left:20px;
    background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Circle-style-warning.svg/100px-Circle-style-warning.svg.png") no-repeat 0 0;
    width:100px;
    height:100px;
    z-index:1;
    cursor:pointer;
}

.ball2
{
    height:300px;
    width:300px;
    background:url("http://www.bargainpartysupplies.com.au/images/justin%20bieber%20dessert%20plate%20s.jpg") no-repeat 0 0;
    border-radius:300px;
    left:-40px;
    bottom:30px;
}

JavaScript

/*
 * jQuery UI Effects 1.8.18
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Effects/
 */
;jQuery.effects || (function($, undefined) {

$.effects = {};



/******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/

// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (!fx.colorInit) {
            fx.start = getColor(fx.elem, attr);
            fx.end = getRGB(fx.end);
            fx.colorInit = true;
        }

        fx.elem.style[attr] = 'rgb(' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
        var result;

        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                return color;

        // Look for rgb(num,num,num)
        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

        // Look for rgb(num%,num%,num%)
    ...