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/

点击后，宽度变为100px，但高度仍为30px，为什么？

修改

仔细阅读文档后，我知道如何让cssHooks与动画一起使用。

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

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

Answer 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');
});

您的示例不起作用的原因是因为动画不会反复调用$.css('test', value)，而是调用$.css('height', value)

每次拨打$.cssHooks时，

$.css(propName, value)都会被调用但是，动画永远不会调用$.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');
});

希望你明白我要向你展示的内容。

为什么jQuery animate不适用于cssHooks？

1 个答案: