brianjlandau (owner)

Revisions

gist: 169863 Download_button fork
public
Public Clone URL: git://gist.github.com/169863.git
Embed All Files: show embed
jquery.effects.transparent_highlight.js #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

/*
 * jQuery UI Effects Transparent Highlight
 * by Brian Landau
 * 
 * Will highlight the element and then fade it back to a transparent background.
 * 
 * Copyright (c) 2009 Brian Landau (Viget Labs)
 * MIT License: http://www.opensource.org/licenses/mit-license.php
 */
(function($) {
 
// 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%)
    if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
        return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
 
    // Look for #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
        return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 
    // Look for #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
        return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
 
    // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
    if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
        return colors['transparent'];
 
    // Otherwise, we're most likely dealing with a named color
    return colors[$.trim(color).toLowerCase()];
}
function getColor(elem, attr) {
    var color;
 
    do {
        color = $.curCSS(elem, attr);
 
        // Keep going until we find an element that has color, or we hit the body
        if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
            break;
 
        attr = "backgroundColor";
    } while ( elem = elem.parentNode );
 
    return getRGB(color);
};
 
 
$.fx.step['backgroundTansparency'] = function(fx) {
  if ( fx.state == 0 ) {
    if ($(fx.elem).css('backgroundColor') == 'transparent'){
      fx.start = 0;
    } else {
      fx.highlightColor = getColor( fx.elem, 'backgroundColor' );
      fx.start = 1;
    }
    if (fx.end == 'transparent'){
      fx.end = 0;
    } else {
      fx.highlightColor = getRGB( fx.end );
      fx.end = 1;
    }
  }
  
  fx.elem.style['backgroundColor'] = "rgba(" + [
    fx.highlightColor[0], fx.highlightColor[1], fx.highlightColor[2], 
    fx.now
  ].join(",") + ")";
};
 
$.effects.transparentHighlight = function(o) {
 
  return this.queue(function() {
 
    // Create element
    var el = $(this), props = ['backgroundImage','backgroundColor','opacity'];
 
    // Set options
    var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
    var color = o.options.color || "#ffff99"; // Default highlight color
    var oldColor = el.css("backgroundColor");
 
    // Adjust
    $.effects.save(el, props); el.show(); // Save & Show
    el.css({backgroundImage: 'none', backgroundColor: color}); // Shift
 
    // Animation
    var animation = {backgroundTansparency: 'transparent' };
    if (mode == "hide") animation['opacity'] = 0;
 
    // Animate
    el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
      if(mode == "hide") el.hide();
      $.effects.restore(el, props);
      if (mode == "show" && $.browser.msie) this.style.removeAttribute('filter');
      if(o.callback) o.callback.apply(this, arguments);
      el.dequeue();
    }});
 
  });
 
};
 
})(jQuery);