r2112 - in branches/dev/effects: . build demos dev-animateClass external tests themes ui

Author: a.farkas.pm
Date: Thu Feb 19 13:12:08 2009
New Revision: 2112
Added:
branches/dev/effects/
branches/dev/effects/AUTHORS.txt
- copied unchanged from r2109, /trunk/AUTHORS.txt
branches/dev/effects/GPL-LICENSE.txt
- copied unchanged from r2109, /trunk/GPL-LICENSE.txt
branches/dev/effects/MIT-LICENSE.txt
- copied unchanged from r2109, /trunk/MIT-LICENSE.txt
branches/dev/effects/build/
- copied from r2109, /trunk/build/
branches/dev/effects/demos/
- copied from r2109, /trunk/demos/
branches/dev/effects/dev-animateClass/
branches/dev/effects/dev-animateClass/index.html
branches/dev/effects/external/
- copied from r2109, /trunk/external/
branches/dev/effects/jquery-1.3.1.js
- copied unchanged from r2109, /trunk/jquery-1.3.1.js
branches/dev/effects/tests/
- copied from r2109, /trunk/tests/
branches/dev/effects/themes/
- copied from r2109, /trunk/themes/
branches/dev/effects/ui/
- copied from r2109, /trunk/ui/
branches/dev/effects/version.txt
- copied unchanged from r2109, /trunk/version.txt
Modified:
branches/dev/effects/ui/effects.core.js
Log:
several enhancements and bugfixes for animateClass
Added: branches/dev/effects/dev-animateClass/index.html
==============================================================================
--- (empty file)
+++ branches/dev/effects/dev-animateClass/index.html    Thu Feb 19 13:12:08
2009
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
+        <title>CSS -> JS</title>
+        <style type="text/css">
+            body {
+                margin: auto;
+                width: 900px;
+            }
+            p {
+                padding: 0;
+                margin: 40px 0 5px;
+            }
+            div.box,
+            .js-on div.box:hover {
+                border: 5px solid #000;
+                border-radius: 1px;
+                -moz-border-radius: 1px;
+                -webkit-border-radius: 1px;
+                background: #a66;
+                height: 200px;
+                width: 200px;
+                padding: 20px;
+            }
+            div.box:hover,
+            .js-on div.box.hover {
+                background: #66a;
+                border-color: #a66;
+                border-radius: 9px;
+                -moz-border-radius: 9px;
+                -webkit-border-radius: 9px;
+                width: 300px;
+                padding: 30px;
+            }
+            div.inner-box,
+            .js-on div:hover div.inner-box {
+                border: 5px solid #000;
+                background: #66a;
+                height: 10px;
+                width: 100px;
+            }
+            div:hover div.inner-box,
+            .js-on div.hover div.inner-box {
+                background: #a66;
+                border-color: #66a;
+                height: 50px;
+            }
+            div.box input {
+                display: block;
+                width: 160px;
+            }
+            .js-on div.box.hover input {
+                width: 220px;
+            }
+            input {
+                border: 3px solid #666;
+            }
+            input:focus {
+                border: 3px solid #a33;
+            }
+            div.height-test {
+                width: 300px;
+                overflow: hidden;
+                padding: 10px 15px;
+                background: #a66;
+            }
+            div.height-hidden {
+                display: none;
+                height: 0;
+                padding: 0 15px;
+                opacity: 0;
+                filter: Alpha(opacity=0);
+            }
+            div.height-small {
+                height: 40px;
+                padding: 5px 15px;
+                opacity: .25;
+                filter: Alpha(opacity=25);
+            }
+
+            .exclude-filter {
+                position: relative;
+                border: 3px solid #000;
+                width: 800px;
+                height: 400px;
+            }
+            .exclude-filter-box {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: 2px solid #666;
+                color: #fff;
+                width: 80px;
+                height: 80px;
+                background: #444;
+            }
+
+            .exclude-filter-box-animate {
+                background: #eee;
+                color: #000;
+                width: 180px;
+                height: 180px;
+            }
+            ul#queue-test,
+            ul#queue-test li {
+                margin: 0;
+                padding: 0;
+                list-style: none;
+            }
+
+            #queue-test {
+                overflow: hidden;
+                zoom: 1;
+            }
+            #queue-test li {
+                display: block;
+                float: left;
+                height: 300px;
+                width: 9px;
+                border-left: 1px solid #339;
+                background: #933;
+            }
+            #queue-test li.hover {
+                background: #339;
+                border-left-color: #933;
+            }
+        </style>
+        <script src="../jquery-1.3.1.js"></script>
+        <script src="../ui/effects.core.js"></script>
+        <script>
+            $('html').addClass('js-on');
+            $(function(){
+
+                $('div.special')
+                    .hover(function(){
+                        var childs = $('*', this)
+                            .stop(true);
+                        $(this)
+                            .stop(true)
+                            .addClass('hover', {duration: 999, clearInlineStyles: true,
animateChilds: childs});
+                    },function(){
+                        var childs = $('*', this)
+                            .stop(true);
+                        $(this)
+                            .stop(true)
+                            .removeClass('hover', {duration: 999, clearInlineStyles: true,
animateChilds: childs});
+                    });
+
+                $('div.box:not(.special)')
+                    .hover(function(){
+                        $(this)
+                            .stop(true, true)
+                            .addClass('hover', {duration: 999});
+                    },function(){
+                        $(this)
+                            .stop(true, true)
+                            .removeClass('hover', {duration: 999});
+                    });
+
+
+                $('div.exclude-filter')
+                    .click(function(){
+
+                        var dynCss = {
+                                top: 200 * Math.random(),
+                                left: 600 * Math.random()
+                            };
+                        $('div.exclude-filter-box', this)
+
+                            .stop(true, true)
+                            .toggleClass('exclude-filter-box-animate', {
+                                duration: 500,
+                                clearInlineStyles: true,
+                                filterCallback: function(opts){
+                                    $.extend(opts[0].animateStyles, dynCss);
+                                    opts[0].resetStyle = 'top: '+ dynCss.top +'px; left: '+
dynCss.left+'px;';
+                                }
+                            });
+                    });
+
+                $('#queue-test li')
+                    .hover(function(){
+                        $(this)
+                            .addClass('hover', {duration: 200, clearInlineStyles: true});
+                    },function(){
+                        $(this)
+                            .removeClass('hover', {duration: 400, clearInlineStyles: true});
+                    });
+
+                $('button.hide')
+                    .click(function(){
+                        $('div.height-test')
+                            .toggleClass('height-hidden', {duration: 500});
+                    });
+                $('button.small')
+                    .click(function(){
+                        $('div.height-test')
+                            .toggleClass('height-small', {duration: 500});
+                    });
+            });
+        </script>
+    </head>
+    <body>
+

Extra Options: {clearInlineStyles: true, animateChilds: '*'}:

+        <div class="box special">
+            <input type="text" />
+            <input type="text" />
+            <div class="inner-box"></div>
+        </div>
+

Extra Option: {filterCallback: function...}, click somewhere:

+        <div class="exclude-filter">
+            <div class="exclude-filter-box"></div>
+        </div>
+

queue-dequeue Test (managed by a workaround)

+        <ul id="queue-test">
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+        </ul>
+

Height/Opacity Test (minor Opacity Bug in IE):

+        <button class="hide">toggle height/opacity hidden</button>
+        <button class="small">toggle height/opacity small</button>
+        <div class="height-test">
+

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua.

+ </div>
+

old features of modified classanimation:

+        <div class="box">
+            <input type="text" />
+            <input type="text" />
+            <div class="inner-box"></div>
+        </div>
+        <a href="classanimation.zip">Download Demo-Files</a>
+    </body>
+</html>
\ No newline at end of file
Modified: branches/dev/effects/ui/effects.core.js
==============================================================================
--- /trunk/ui/effects.core.js    (original)
+++ branches/dev/effects/ui/effects.core.js    Thu Feb 19 13:12:08 2009
@@ -89,48 +89,198 @@
            if (unit[0] > 0) value[x] = unit[0] * factor + unit[1];
        });
        return value;
-    },
-
-    //Base function to animate from one class to another in a seamless
transition
-    animateClass: function(value, duration, easing, callback) {
-
-        var cb = (typeof easing == "function" ? easing : (callback ? callback :
null));
-        var ea = (typeof easing == "string" ? easing : null);
-
-        return this.each(function() {
-
-            var offset = {}; var that = $(this); var oldStyleAttr =
that.attr("style") || '';
-            if(typeof oldStyleAttr == 'object') oldStyleAttr =
oldStyleAttr["cssText"]; /* Stupidly in IE, style is a object.. */
-            if(value.toggle) { that.hasClass(value.toggle) ? value.remove =
value.toggle : value.add = value.toggle; }
-
-            //Let's get a style offset
-            var oldStyle = $.extend({}, (document.defaultView ?
document.defaultView.getComputedStyle(this,null) : this.currentStyle));
-            if(value.add) that.addClass(value.add); if(value.remove)
that.removeClass(value.remove);
-            var newStyle = $.extend({}, (document.defaultView ?
document.defaultView.getComputedStyle(this,null) : this.currentStyle));
-            if(value.add) that.removeClass(value.add); if(value.remove)
that.addClass(value.remove);
-
+    }
+};
+//Base function to animate from one class to another in a seamless
transition
+$.fx.step._pseudoAnimation = function(){};
+$.effects.animateClass = function(value, duration, easing, callback){
+ var clearInlineStyles, animateChilds, excludeProperties,
filterCallback, queue, cb, ea;
+
+    if (typeof duration == 'object') {
+ easing = duration.easing;
+ callback = duration.complete;
+ //new features
+ clearInlineStyles = duration.clearInlineStyles;
+ animateChilds = duration.animateChilds;
+        filterCallback = duration.filterCallback;
+        queue = duration.queue;
+ //last
+ duration = duration.duration;
+ }
+
+    filterCallback = filterCallback ||
+        function(){};
+
+ cb = (typeof easing == "function" ? easing : (callback ? callback :
null));
+ ea = (typeof easing == "string" ? easing : null);
+
+ function getElementOptions(){
+        var elem = $(this),
+            newStyle,
+            oldStyleAttr = elem.attr("style") || '';
+
+        (clearInlineStyles &&
+            elem.attr("style", ''));
+
+        newStyle = getElementStyles.call(this);
+
+        //handle width/height here?
+ if(clearInlineStyles){
+            elem.attr("style", oldStyleAttr);
+            oldStyleAttr = "";
+        }
+
+        return {element: elem, newStyle: newStyle, resetStyle: oldStyleAttr};
+ }
+
+    function camelize(s){
+        return s.replace(/\-(\w)/g, function (m, p1){
+            return p1.toUpperCase();
+        });
+    }
+
+    function getElementStyles(){
+        var style = (document.defaultView) ?
+                document.defaultView.getComputedStyle(this, null) :
+                this.currentStyle,
+            newStyle = {},
+            key;
+        if(style && style[0] && style.length && style[style[0]]){ //Safari
+            var len = style.length;
+            while(len--){
+                key = style[len];
+                if(style[key]){ // no null properties
+                    newStyle[camelize(key)] = style[key];
+                }
+            }
+        } else { //normal Browser + IE
+            for(key in style){
+

Topic Participants
Paul Bakaus

r2112 - in branches/dev/effects: . build demos dev-animateClass external tests themes ui

r2112 - in branches/dev/effects: . build demos dev-animateClass external tests themes ui

Topic Participants

Paul Bakaus