0

我正在使用 DOJO 来创建一些动画。h1当鼠标悬停在该部分时，我正在尝试为该部分内部设置动画。

这确实有效：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="section">
            <div id="title">Something</div>
        </div>
    </body>

</html>

JavaScript：

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) {
    var section = dom.byId("section"),
        title = dom.byId("title");

    on(section, mouse.enter, function(evt){
        fx.slideTo({
            node: title, 
            top: "0"
        }).play();
    });

    on(section, mouse.leave, function(evt){
        fx.slideTo({
            node: title, 
            top: "200"
        }).play();
    });
});

我想要工作（它没有）：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <section>
            <h1>Something</h1>
        </section>
    </body>

</html>

JavaScript：

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) {
    var section = query("section");

    on(section, mouse.enter, function(evt){
        fx.slideTo({
            node: query("h1",this), 
            top: "0"
        }).play();
    });

    on(section, mouse.leave, function(evt){
        fx.slideTo({
            node: query("h1",this), 
            top: "200"
        }).play();
    });
});

我正在尝试h1使用 , 来获取元素query("h1",this)来滑动它。我得到的只是我的开发工具中的一个错误。我已经尝试寻找解决方案，但我找不到。我该如何解决这个问题？

 Uncaught TypeError: Object [object HTMLHeadingElement] has no method 'getBoundingClientRect'
4

1 回答 1

1

问题是它query不返回一个节点，它返回一个NodeList. 您可以在错误中看到这一点，它指的是Object [object HTMLHeadingElement]— 这实际上是一个类似数组的对象 ( Object [...])，其中包含一个项目，一个HTMLHeadingElement.

您需要 DomNode，因此最简单的解决方案是更改它：

node: query("h1", this)

对此：

node: query("h1", this)[0]

请注意，这仅在查询返回有效节点时才有效。否则，你会得到一个越界错误。

您可以在 dojo/query 的 API 文档中看到更多信息。

于 2012-09-18T11:34:05.080 回答