2 
$.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/

点击后，宽度变成了100px，但是高度还是30px，为什么？

编辑

仔细阅读文档后，我知道如何让 cssHooks 与 animate 一起工作。

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

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

4

1 回答 1

1

这是我认为您真正需要的，每次设置宽度时都更改高度。$.cssHooks旨在为现有属性工作。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');
});​

您的示例不起作用的原因是因为 animate 没有$.css('test', value)重复调用，而是在调用$.css('height', value)

$.cssHooks每次调用时都会被调用$.css(propName, value)但是，animate 从不调用$.css('test', value)，这就是当你调用$.css('test', 1000)自己时它起作用的原因；

@clyfish 您对问题的更新不是做您正在做的事情的正确方法。你试图

添加对自定义属性动画的支持test并添加一个每次调用时$.css('test')都会调用的钩子

这是你真正应该拥有的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');
});​

希望你明白我想向你展示的东西。

于 2012-05-25T04:49:32.197 回答