[jQuery] Re: animation question

[Karl Swedberg]

You should be able to set up simple effects plugins like this:

jQuery.fn.extend({
  widthShow: function(speed, easing, callback) {
    return this.animate({width: 'show'}, speed, easing, callback);
  },
  widthHide: function(speed, easing, callback) {
    return this.animate({width: 'hide'}, speed, easing, callback);
  },
  widthToggle: function(speed, easing, callback) {
    return this.animate({width: 'toggle'}, speed, easing, callback);
  }
});



--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jan 18, 2009, at 8:30 AM, Raúl Negueruela wrote:

I need an animation like show and hide but that only animates in
width.

I've tried animate but didn't work, to extend jQuery with an script,
but it seems like that script didn't execute. The only way i've found
is to extend but having the objects extended inside the
jQuery.fn.extend(); I've seen in the jQuery script. That is not useful
because I think it isn't the best way to do it, and in that case I
can't use the script from google's api.

Here it is the extension i've made (for jQuery 1.2.6, I don't know if
it works in version 1.3):

jQuery.fn.extend({showhor:function(speed,callback){return speed?
this
.animate({width:"show"},speed,callback):this.filter(":hidden").each
(function()

{this.style.display=this.oldblock||"";if(jQuery.css(this,"display")
=="none"){var elem=jQuery("<"+this.tagName+" />").appendTo

("body");this.style.display=elem.css("display");if
(this.style.display=="none")this.style.display="block";elem.remove
();}}).end();},hidehor:function

(speed,callback){return speed?this.animate
({width
:"hide"},speed,callback):this.filter(":visible").each(function()
{this.oldblock=this.oldblock||jQuery.css

(this,"display");this.style.display="none";}).end();});

Thanks in advance