Hi all.

I've had some time to experiment with CSS3 and jQuery and found some
serious issues in the jQuery css implementation. First of all jQuery
doesn't support CSS properties with multiple arguments like text-
shadow.

So I played around with creating a jQuery plugin and almost created my
own animation queue system as I couldn't use the jQuery parameter
object in the animation method. But luckily I figured out a half ass
work around.

$.fn.disassemble = function (){
  return this.each(function (){
    var el = $(this);
    var offset = getOffset(el);
    el.animate(
      { blurRadius: 30 },
      {
        step: function(a, b){
          el.attr(getStyle(offset, a, el.css('color')));
        },
        duration: 800,
        complete: function(){
          $(this).hide('medium');
          //$(this).css('visibility', 'hidden');
        }
      }
    );
  });
}
I saw in the comments of http://dev.jquery.com/ticket/4214 that jQuery
won't support css features like text-shadow before it is supported in
all jQuery supported browsers but there should be a way to write
plugins that doesn't involve half-assed work arounds like mine above.

Conclusion:
1) Please make jQuery forward compatible when refactoring curCSS and
attr.
2) jQuery is not suitable for projects that targets specific browser
groups (e.i. FF3 and Chrome) as is.

Please don't take this the wrong way - I like jQuery ;)

Regards, Jon

ps. take it for a spin! (never mind the ugly effect - kinda like
<blink>
$('h1').assemble();
$('p').mouseover(function(){
  $(this).disassemble();
});
(function(d){function f(a){var b=a.a("display"),c=a.a
("display","inline").width();a.a("display",b);return 8+a.position
().left+c}function e(a,b,c){return{style:"left:-"+a
+"px;position:relative;text-shadow:"+a+"px 0 "+b+"px "+c+";"}}
d.g.j=function(){return this.f(function(){var a=d(this),b=f(a);a.c({d:
30},{h:function(c){a.b(e(b,c,a.a("color")))},e:800,complete:function()
{d(this).k("medium")}})})};d.g.i=function(){return this.f(function()
{var a=d(this),b=f(a);a.b(e(b,30,a.a("color")));a.c({d:30},{h:function
(c){a.b(e(b,
30-Math.round(c),d(this).a("color")))},e:1E3})})}})(jQuery);

--

You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to 
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=.


Reply via email to