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 に答える