javascript - 如何使用 animateProperty 来突出显示 TextBox 背景？

Question

我正在尝试对 dijit/form/TextBox 的属性 (backgroundColor) 进行动画处理。当这不起作用时，我开始抓狂:

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();