jQuery animate() ... several pixels per step

I am trying to build a console-like animation.

I wanted to use the animate func开发者_运维问答tion to resize a div, but not in a smooth animation like 1px per step. I want more like 10px per step.

I could not find a solution or an option within the animate function, so i tried to use the step-option of animate, but it doesn't work:

Something like this:

$(this).animate({height: "60"}, {
    duration: 5000,
    step: function(){
       var curheight = $(this).height();
       $(this).css('height', curheight+9+'px');
    }   
});

animate still animates it 1 pixel a step and ignores the new height.

Any ideas? I'm kind of stuck here.

Thanks.

---

When you do an animation with the default: $(this).animate({height: "60"})
It turns in to a swing animation like this: $(this).animate({height: "60"}, 500, "swing")

Now the easing options that are available by default are swing and linear. It sounds like you want a new one called stepped.

Looking at the jQuery source code.. here is how it adds the easing methods to begin with...

jQuery.fn.extend({
    //other stuff
    easing: {
        linear: function( p, n, firstNum, diff ) {
            return firstNum + diff * p;
        },
        swing: function( p, n, firstNum, diff ) {
            return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
        }
    }
    //other stuff
});

Looking on the internet you can see the animations with the command

alert($.easing.linear)

Now I really don't know about that fn.extend stuff because it did not even work when I tried it... but anyway I tried this and it worked. (just doing the same as linear)

$.easing.test = function(p, n, firstNum, diff) {
    return firstNum + diff * p;
}
$('div').animate({
    height: 200
}, 2000, 'test')

Try it here http://jsfiddle.net/UFq7c/1/

It seems that the parameters are

• p Percentage completion
• n Number of milliseconds transpired
• firstNum The starting point
• diff How far to go

Linear was easy to figure out. Starting point plus How far to go times Percentage completion

We can easily say to move ten percent at a time instead of a tenth of a percent at a time with this

$.easing.test = function(p, n, firstNum, diff) {
    return firstNum + diff * (parseInt(p / .10) * .10); // .10 is 10%, .15 is 15%, etc
}

Try it here http://jsfiddle.net/UFq7c/2/

Now the only challenge is turning that into a number of pixels. You would think that firstNum would be zero and diff would be 200.. but nooo.. firstNum seems to always be zero percent and diff is always 100% (one hundred percent is the number one).

hmm. Seems silly. 0% plus 100% times Percentage complete... oh well

Well it looks like you will have to animate only a certain amount at a time. You can easily animate ten pixels at a time with the above example just using this

$('div').animate({height: '+=100'}, 2000, 'test').animate({height: '+=100'}, 2000, 'test')

That animates 100 pixels twice, 10% at a time (10% of 100 pixels is 10 pixels at a time).

You may want to change 10% to 100% and then animate 10 pixels at a time like this

$.easing.test = function(p, n, firstNum, diff) {
    return firstNum + diff * (parseInt(p / 1.00) * 1.00); // 1.00 is 100%, 1.50 is 150%, etc
}
for(var i = 0; i < 20; i++) {// Do this code 20 times
    $('div').animate({height: '+=10'}, 250, 'test')
}

It depends on how your code works. The 100% rule seems silly but it works.

If you use the 100% rule then you may want to make it shorter like this which makes the same result

$.easing.test = function(p, n, firstNum, diff) {
    if(p == 1)
        return firstNum + diff
    else
        return firstNum
}

Now I will wait for my answer to be down voted because I do not use braces on my if statements or semicolons at the end of my commands.

Cheers!

---

Maybe you can just set jQuery.fx.interval to 130 (13 is default). Every animation would be console-like then.

---

something like that : http://nayi.free.fr/error (not with jQuery) ?

---

Unfortunately, based on some research blogger Ben Nadel did, the step property is only used for reporting back the value and not modifying it.

However, you can make your own method for animating the feature pretty simply. You could also view the jQuery .animate() source and modify it to suite your needs, though I feel using something like a setInterval and your own logic may be easier.

I would be nice if jQuery allowed you to return a new (altered) value though, and may be worth mentioning on their site as a feature update.