如何在框架中使用jquery

Question

<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 将动画添加到 aframe。但它不起作用。 Alert($el) 表明 $el 是一个对象。 $el.position 是一些代码。 el.position 未定义。

代码在这里：https://glitch.com/edit/#!/skill-lab

提前致谢！

Answer 1

JQuery 选择器返回一个包含所有满足选择器条件的元素的数组。
因此，使用 element/id 选择器需要将元素引用为$el=$("cssSelector")[0];

就像我在这里所做的那样：https://jsfiddle.net/7q6dx45L/1/

---

jquery animate() 方法适用于 CSS 属性，因此不适用于动画 webGL 对象（位置、旋转、颜色）。
我建议使用 <a-animation> 或 ngoKevins aframe animation component 中的构建。
它们建立在tween.js（a-animation）和anime.js（组件）之上