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/

クリックすると、幅は100ピクセルになりますが、高さは30ピクセルのままです。なぜですか？

編集

ドキュメントを注意深く読んだ後、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 に答える