Question

我正在尝试设置backgroundColor的属性（dijit/form/TextBox）的动画。当这不起作用的时候我开始拔头发了：

var node = dom.byId("myTextBox");
fx.animateProperty( {
    node : node, 
    duration : 750, 
    properties : {
        backgroundColor : {
            start : "yellow"
        }
    }
}).play();

然而，这有效：

var node = dom.byId("myTextBox");
fx.animateProperty( {
    node : node.parentNode.parentNode, // grandparent of "myTextBox" 
    duration : 750, 
    properties : {
        backgroundColor : {
            start : "yellow"
        }
    }
}).play();

这是怎么回事？ this page上的示例不需要，但没有一个使用TextBox。

附带问题：是否有更直接的等效于JQueryUI的highlight效果？这就是我想要的。

Answer 1

使用dijit.byId("myTextBox")获取对窗口小部件对象的引用可能会更好。然后，您可以引用myTextBox.domNode或myTextBox.focusNode，具体取决于您要突出显示的内容。我不确定您是希望突出显示实际文本输入区域还是背景，但this simple jsfiddle同时演示了这两者。您的代码将更改为：

var textbox = dijit.byId("myTextBox");
fx.animateProperty( {
    node : textbox.focusNode // If you are trying to highlight the input background 
    duration : 750, 
    properties : {
        backgroundColor : {
            start : "yellow"
        }
    }
}).play();

如何使用TextBox背景高亮显示的animate属性？

1 个答案: