[jQuery] Re: More efficient animation for multiple elements

[Karl Swedberg]

that looks great, Ricardo. I'm interested to hear why you chose to  
write this:

	var normal =  
Number(this.find('a:first').css('paddingLeft').replace('px',''));

instead of this:

        var normal = parseInt(this.find('a:first').css('paddingLeft'),10);

Is there an advantage to your line? I wouldn't have thought to write  
it that way.

--Karl

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




On Oct 25, 2008, at 4:25 PM, ricardobeat wrote:


It's working again: http://jsbin.com/evodi/

On Oct 25, 4:18 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
In case Remy Sharp is reading this:

jsbin is not working here.. when I try to save to a new URL, it goes
tohttp://edit/
Also, pressing backspace results in lag, using delete doesn't.

I turned your code into a plugin, and made some changes. Now you pass
an object with parameters and only need to specify an 'offset' in
padding, the values are calculated from the element's current  
padding.
I tried hard to keep the overall width constant but it seems
impossible. Here's the code I ended up with (same html/css):

(function($) {

  $.fn.shrinkHover = function(options){

    var normal =
Number(this.find('a:first').css('paddingLeft').replace('px',''));
    var length = this.find('li a').length;

    var opt = { size: 12, speed: 350, easing: "easeOutExpo"};
    jQuery.extend(opt,options);

    var large = normal+opt.size;
    var small = normal-(opt.size/length), small = (small<0) ? 0 :
small;
    var extra = Math.round( (small%1)*length ), small =
Math.floor(small);
    large += extra;

    this.find('li').hover(function(){

        //Mouse over
        $(this).children('a').animate({
          paddingLeft: large,
          paddingRight: large
        },opt.speed,opt.easing).dequeue();

        $(this).siblings('li').children('a').animate({
          paddingLeft: small,
          paddingRight: small
        },opt.speed,opt.easing).dequeue();

      }, function() {

        // Mouse out
        $(this).siblings().andSelf().children('a').animate({
          paddingLeft: normal,
          paddingRight: normal
        },opt.speed,opt.easing).dequeue();

    });
  };

})(jQuery);

$(document).ready(function(){

    $('#subNavigation').shrinkHover();

});

cheers,
- ricardo

On Oct 25, 2:28 am, "c.barr" <[EMAIL PROTECTED]> wrote:

Cool, I've never seen that site before.  I made a small demo using  
my
code above:http://jsbin.com/abuxe

Strangely enough it's not working properly, and that's a direct copy
of what I wrote that works.  Basically they are all shrinking, and  
the
on your mouse is over does not get larger.  Not sure what I've done
wrong here.

Anyway, there's a 90% working demo...

On Oct 24, 9:58 pm, ricardobeat <[EMAIL PROTECTED]> wrote:

Maybe you could post a working sample to jsbin.com, that would make
things a lot easier.

On Oct 24, 4:00 pm, "c.barr" <[EMAIL PROTECTED]> wrote:

Hate to bump this, but it might get lost otherwise!