r2225 - in branches/dev/effects: . dev-animateClass ui
Author: a.farkas.pm
Date: Mon Mar 9 01:15:03 2009
New Revision: 2225
Added:
branches/dev/effects/jquery-1.3.2.js
- copied unchanged from r2216, /trunk/jquery-1.3.2.js
Modified:
branches/dev/effects/dev-animateClass/index.html
branches/dev/effects/ui/effects.core.js
Log:
IE8 RC1 outline-Bugfix, handling multiple animation of shorthand properties
and filter/opacity fix for IE
Modified: branches/dev/effects/dev-animateClass/index.html
==============================================================================
--- branches/dev/effects/dev-animateClass/index.html (original)
+++ branches/dev/effects/dev-animateClass/index.html Mon Mar 9 01:15:03
2009
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!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"
/>
@@ -12,8 +12,7 @@
padding: 0;
margin: 40px 0 5px;
}
- div.box,
- .js-on div.box:hover {
+ div.box {
border: 5px solid #000;
border-radius: 1px;
-moz-border-radius: 1px;
@@ -23,7 +22,7 @@
width: 200px;
padding: 20px;
}
- div.box:hover,
+
.js-on div.box.hover {
background: #66a;
border-color: #a66;
@@ -33,15 +32,14 @@
width: 300px;
padding: 30px;
}
- div.inner-box,
- .js-on div:hover div.inner-box {
+ 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 {
+
+ div.hover div.inner-box {
background: #a66;
border-color: #66a;
height: 50px;
@@ -50,7 +48,7 @@
display: block;
width: 160px;
}
- .js-on div.box.hover input {
+ div.box.hover input {
width: 220px;
}
input {
@@ -126,7 +124,7 @@
border-left-color: #933;
}
</style>
- <script src="../jquery-1.3.1.js"></script>
+ <script src="../jquery-1.3.2.js"></script>
<script src="../ui/effects.core.js"></script>
<script>
$('html').addClass('js-on');
@@ -193,11 +191,13 @@
$('div.height-test')
.toggleClass('height-hidden', {duration: 500});
});
+
$('button.small')
.click(function(){
$('div.height-test')
- .toggleClass('height-small', {duration: 500});
+ .toggleClass('height-small', {duration: 500});
});
+
});
</script>
</head>
@@ -222,7 +222,7 @@
<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):
+ Height/Opacity Test (<a
href="http://dev.jquery.com/ticket/3981">minor Opacity Bug in IE</a>):
<button class="hide">toggle height/opacity hidden</button>
<button class="small">toggle height/opacity small</button>
<div class="height-test">
@@ -235,6 +235,5 @@
<input type="text" />
<div class="inner-box"></div>
</div>
- <a href="classanimation.zip">Download Demo-Files</a>
</body>
</html>
Modified: branches/dev/effects/ui/effects.core.js
==============================================================================
--- branches/dev/effects/ui/effects.core.js (original)
+++ branches/dev/effects/ui/effects.core.js Mon Mar 9 01:15:03 2009
@@ -93,6 +93,22 @@
};
//Base function to animate from one class to another in a seamless
transition
$.fx.step._pseudoAnimation = function(){};
+
+var shortHandStyles = {
+ padding: 'padding$site',
+ margin: 'margin$site',
+ borderColor: 'border$siteColor',
+ borderWidth: 'border$siteWidth'
+ },
+ shortHandSites = ['Left', 'Right', 'Top', 'Bottom'];
+
+$.each(shortHandStyles, function(styleProp, styleVal){
+ shortHandStyles[styleProp] = [];
+ $.each(shortHandSites, function(i, site){
+ shortHandStyles[styleProp].push(styleVal.replace('$site', site));
+ });
+});
+
$.effects.animateClass = function(value, duration, easing, callback){
var clearInlineStyles, animateChilds, excludeProperties,
filterCallback, queue, cb, ea;
@@ -155,7 +171,7 @@
}
} else { //normal Browser + IE
for(key in style){
- if(style[key]){ // no null properties
+ if(!(/outline/.test(key)) && style[key]){ // no null properties +
IE8RC1 has some problems with outline*
newStyle[key] = style[key];
}
}
@@ -179,7 +195,7 @@
height: true,
width: true
};
-
+
function filterStyles(opts, oldStyle){
for(var i = 0, len = opts.length; i < len; i++){
opts[i].animateStyles = {};
@@ -190,11 +206,13 @@
n.indexOf("length") === -1 &&
opts[i].newStyle[n] !== oldStyle[i][n] /* Only values that have
changed are used for the animation */ &&
!n.match(/^pos|^pixel/) && !blacklist[n]) {
+ /*
if(n === 'backgroundPosition' && $.fx.step.backgroundPosition){
- opts[i].animateStyles[n] = '('+ opts[i].newStyle[n] +')';
//workaround for jQuery�s bug in animation-module
- } else if(dimStyles[n] && (opts[i].newStyle[n] === 'auto' ||
(opts[i].newStyle.display === 'none'))){
+ opts[i].animateStyles[n] = '('+ opts[i].newStyle[n] +')';
//workaround for jQuery´s bug in animation-module
+ } else */
+ if(dimStyles[n] && (opts[i].newStyle[n] === 'auto' ||
(opts[i].newStyle.display === 'none'))){ // handle height/width
opts[i].animateStyles[n] = opts[i].element[n]();
- } else if(n == 'filter' &&
opts[i].newStyle[n].indexOf('opacity=') !== -1){
+ } else if(n == 'filter' &&
opts[i].newStyle[n].indexOf('opacity=') !== -1){ // handle filter opacity
opts[i].animateStyles.opacity =
parseInt(opts[i].newStyle[n].match(/opacity=([^)]*)/)[1], 10) / 100;
} else if ((!isNaN(parseInt(opts[i].newStyle[n], 10)) &&
opts[i].newStyle[n].match(/\s|,/) === null) ||
($.fx.step[n] && !blacklistValues[opts[i].newStyle[n]])) /* Only
things that can be parsed to integers or we have a animate-Plugin for this
*/ {
@@ -202,14 +220,24 @@
}
}
}
- //ToDo: This doesn�t work
- if(oldStyle[i].filter && oldStyle[i].filter.indexOf('opacity=') != -1
&& (!opts[i].animateStyles.opacity)){
- opts[i].animateStyles.opacity = 1;
- }
+
+ //Filter shorthand properties for smoother animation in IE and some
other non gecko browsers
+ $.each(shortHandStyles, function(shortHand, deleteStyes){
+ if(opts[i].animateStyles[shortHand]){
+ $.each(deleteStyes, function(j, deleteStyle){
+ if(opts[i].animateStyles[deleteStyle]){
+ delete opts[i].animateStyles[deleteStyle];
+ }
+ });
+ }
+ });
opts[i].animateStyles._pseudoAnimation = 1; //animation
queue-/deque-workaround (always animate something)
+
+ //this will work, if Ticket 3981 is resolved in jQuery
+ if(oldStyle[i].filter && !opts[i].animateStyles.opacity &&
oldStyle[i].filter.indexOf('opacity=')){
+ opts[i].animateStyles.opacity = '1';
+ }
}
- //
-
return opts;
}
@@ -255,7 +283,7 @@
//last chance to manipulate the animateStyles-object, set starting
and/or reset-styles
filterCallback.call(that[0], options);
-
+
var len = options.length,
i = len,
complete = function(){
@@ -263,11 +291,10 @@
that.addClass(value.add));
(value.remove &&
that.removeClass(value.remove));
-
+
$.each(options, function(i, item){
item.element.attr("style", item.resetStyle);
});
-
if(cb){
cb.apply(that[0], arguments);
}
@@ -366,7 +393,7 @@
*/
// We override the animation for all of these color styles
-$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'],
function(i,attr){
+$.each(['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'],
function(i,attr){
$.fx.step[attr] = function(fx) {
if ( !fx.colorsInitialized ) {
fx.start = getColor( fx.elem, attr );