如何在框架中使用jquery

<a-gltf-model id="nacl500" src="#bottle" scale="0.1 0.1 0.1" position="-0.27 1.410 -0.83" rotation="0 270 0" 
       bottleactivity__movetocamera="event:movetocamera" bottleactivity__rotatetobacksite="event:rotatetobacksite" bottleactivity__rotatetotopsite="event:rotatetotopsite" 
       bottleactivity__movetodesk="event:movetodesk" bottleactivity__takeoffcap="event:takeoffcap" bottleactivity__hang="event:hang"> 
    <a-gltf-model src="#bottlewaterbottom"></a-gltf-model> 
    <a-gltf-model id="bottlecap" src="#bottledecker" position="0 0.904 0"></a-gltf-model> 
    <a-gltf-model src="#naci500"></a-gltf-model> 
    </a-gltf-model> 

init:function(){ 
var self=this; 
var data= this.data; 
var el=this.el; 
//var $el=$("#nacl500"); 
var $el=$(el); 
var status=0; 

this.movetocamera=function(){ 
    //alert(data.message); 
    //el.setAttribute("position", "0 1.054 -0.19"); 
    //alert($el.position); 
    $el.animate({position:'0 1.054 -0.19'},"slow"); 
};

我想通過jquery添加動畫到框架。但它並不奏效。 Alert（$ el）顯示$ el是一個對象。 $ el.position是一些代碼。 el.position是未定義的。如何在框架中使用jquery

代碼是在這裏：提前https://glitch.com/edit/#!/skill-lab

謝謝！

來源

2017-07-31 Le Müller

JQuery選擇器返回一個數組，其中包含滿足選擇器citeria的所有元素。
因此，使用元/ id選擇您需要參考元素$el=$("cssSelector")[0];

像我一樣在這裏：https://jsfiddle.net/7q6dx45L/1/

了jQuery animate()方法適用於CSS屬性，因此不會對動畫的WebGL對象的工作（位置，旋轉，顏色）。
我會建議使用 <a-animation>或ngoKevins aframe animation component的版本。
它們建立在 tween.js（a動畫）和 anime.js（組件）

來源

2017-07-31 21:47:36

謝謝你的回覆。我像你所說的那樣做了。但它仍然不起作用。也許原因是動畫？ –

我添加了代碼：$ el.animate（{position：'1 1 1'}，300）;在你身邊，但它也無能爲力。 –

@LeMüller對不起，我只提到參考，更新 –

如何在框架中使用jquery

回答

相關問題