What about,
- (function($) {
- $.fn.transition = $.fn.transit = function(properties,duration,easing,complete)
- {
- var optall = $.speed(duration,easing,complete);
- $.each
- (
- properties,
- (
- function(items,options)
- {
- return function(css_property,value)
- {
- var parameter = {};
- parameter[css_property] = value;
- options.queue = $.getTransitionQueueName(css_property);
- items
- .stopTransit(css_property)
- .animate(parameter,options)
- .dequeue($.getTransitionQueueName(css_property));
-
- };
- }
- )(this,optall)
- );
-
- return this;
- };
-
- $.fn.stopTransition = $.fn.stopTransit = function(properties)
- {
- if (typeof properties == 'string')
- {
- properties = properties.split(" ");
- }
- $.each
- (
- properties,
- (
- function(items)
- {
- return function(key,css_property)
- {
- items.stop($.getTransitionQueueName(css_property),true,false);
- };
- }
- )(this)
- );
-
- return this;
- };
-
- $.getTransitionQueueName = function(css_property)
- {
- return "__"+ css_property + "#" + "transition";
- }
-
- })(jQuery);
Because animate is mostly for.. animations and when I want to design an hover opacity effect in IE just wanna write
- $("p-menu").live("mouseenter",function(){$(this).transition({opacity:1},"fast");});
- $("p-menu").live("mouseleave",function(){$(this).transition({opacity:0.5},"slow");});
instead of
- $("p-menu").live("mouseenter",function(){$(this).stop().animate({opacity:1},"fast");});
- $("p-menu").live("mouseleave",function(){$(this).stop().animate({opacity:0.5},"slow");});
and risk some stop animation issue on other properties if there are...
PS: meaning adding this to the core or has a plugin knowing css transition properties aren't the solution if you want both animation and transition on one element
//Try this
- (function(a){a.fn.transition=a.fn.transit=function(b,c,d,e){var f=a.speed(c,d,e);a.each(b,function(b,c){return function(d,e){var f={};f[d]=e;c.queue=a.getTransitionQueueName(d);b.stopTransit(d).animate(f,c).dequeue(a.getTransitionQueueName(d))}}(this,f));return this};a.fn.stopTransition=a.fn.stopTransit=function(b){if(typeof b=="string"){b=b.split(" ")}a.each(b,function(b){return function(c,d){b.stop(a.getTransitionQueueName(d),true,false)}}(this));return this};a.getTransitionQueueName=function(a){return"__"+a+"#"+"transition"}})(jQuery);$("div").live("mouseenter",function(a){$(this).transition({opacity:0},"fast");a.stopPropagation()});$("div").live("mouseleave",function(a){$(this).transition({opacity:1},"slow");a.stopPropagation()})