Question

$.cssHooks.test = {
    get: function(elem) {
        return $(elem).height();
    },
    set: function(elem, value) {
        $(elem).height(value);
    }
};

$('#test').css('test', '30px');

$('#test').click(function() {
    $(this).animate({
        width: 100,
        test: 100
    }, 'slow');
});​

http://jsfiddle.net/CzkQ8/2/

After click, the width gets to 100px, but the height is still 30px, why?

Edit

After carefully reading the docs, I know how to get cssHooks to work with animate.

$.fx.step.test = function(fx) {
    $.cssHooks.test.set(fx.elem, fx.now + fx.unit);
};

http://jsfiddle.net/CzkQ8/12/

Answer 1

This is what I think you really need, change the height every time you set the width. $.cssHooks is meant to work for existing properties. http://jsfiddle.net/CzkQ8/11/

$.cssHooks.width = {
    set: function(elem, value) {
        elem.style.width = elem.style.height = value;
    }
};

$('#test').click(function() {
    $(this).animate({
        width: 100
    }, 'slow');
});​

The reason your example doesn’t work is because animate is not calling $.css('test', value) repeatedly, it’s calling $.css('height', value)

$.cssHooks gets called every time you call $.css(propName, value) However, animate never calls $.css('test', value) that is why it works when youcall $.css('test', 1000) yourself;

@clyfish
Your update to your question is not the correct way to do what you are doing. You’re trying to

Add support to animate a custom property test and add a hook that is called every time $.css('test') is called

This is what you really should have http://jsfiddle.net/CzkQ8/14/

$.cssHooks.test = {       
    get: function(elem) {
        return $(elem).height();
    },
    set: function(elem, value) {
        $(elem).height(value);
    }
};

$.fx.step.test = function(fx) {
    // No need to call the hook itself. A step function is supposed to call 
    // $.css() and that will in turn call the hook
    $(fx.elem).css('test', fx.now + fx.unit);
};

$('#test').click(function() {
    $(this).animate({
        width: 100,
        test: 100
    }, 'slow');
});​

Hope you understand what I’m trying to show you.